From 330ab9682beef7b1718a110297c80661a031b8de Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 7 Nov 2022 20:02:59 -0600
Subject: [PATCH 1/4] "show more" instead of "show all" txos in lists

---
 .../transactions-list.component.html            | 12 ++++++------
 .../transactions-list.component.ts              | 17 +++++++++++++++++
 2 files changed, 23 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 96f792f82..80bec2d28 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -20,7 +20,7 @@
       <div class="col">
         <table class="table table-borderless smaller-text table-sm table-tx-vin">
           <tbody>
-            <ng-template ngFor let-vin let-vindex="index" [ngForOf]="tx['@vinLimit'] ? ((tx.vin.length > inputRowLimit) ? tx.vin.slice(0, inputRowLimit - 2) : tx.vin.slice(0, inputRowLimit)) : tx.vin" [ngForTrackBy]="trackByIndexFn">
+            <ng-template ngFor let-vin let-vindex="index" [ngForOf]="tx.vin.slice(0, getVinLimit(tx))" [ngForTrackBy]="trackByIndexFn">
               <tr [ngClass]="{
                 'assetBox': (assetsMinimal && vin.prevout && assetsMinimal[vin.prevout.asset] && !vin.is_coinbase && vin.prevout.scriptpubkey_address && tx._unblinded) || inputIndex === vindex,
                 'highlight': vin.prevout?.scriptpubkey_address === this.address && this.address !== ''
@@ -146,9 +146,9 @@
                 </td>
               </tr>
             </ng-template>
-            <tr *ngIf="tx.vin.length > inputRowLimit && tx['@vinLimit']">
+            <tr *ngIf="tx.vin.length > getVinLimit(tx)">
               <td colspan="3" class="text-center">
-                <button class="btn btn-sm btn-primary mt-2" (click)="loadMoreInputs(tx);"><span i18n="show-all">Show all</span> ({{ tx.vin.length }})</button>
+                <button class="btn btn-sm btn-primary mt-2" (click)="showMoreInputs(tx)"><span i18n="show-more">Show more</span> ({{ getVinLimit(tx, true) }} / {{ tx.vin.length }})</button>
               </td>
             </tr>
           </tbody>
@@ -158,7 +158,7 @@
       <div class="col mobile-bottomcol">
         <table class="table table-borderless smaller-text table-sm table-tx-vout">
           <tbody>
-            <ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx['@voutLimit'] ? ((tx.vout.length > outputRowLimit) ? tx.vout.slice(0, outputRowLimit - 2) : tx.vout.slice(0, outputRowLimit)) : tx.vout" [ngForTrackBy]="trackByIndexFn">
+            <ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx.vout.slice(0, getVoutLimit(tx))" [ngForTrackBy]="trackByIndexFn">
               <tr [ngClass]="{
                 'assetBox': assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded || outputIndex === vindex,
                 'highlight': vout.scriptpubkey_address === this.address && this.address !== ''
@@ -257,9 +257,9 @@
                 </td>
               </tr>
             </ng-template>
-            <tr *ngIf="tx.vout.length > outputRowLimit && tx['@voutLimit']">
+            <tr *ngIf="tx.vout.length > getVoutLimit(tx)">
               <td colspan="3" class="text-center">
-                <button class="btn btn-sm btn-primary mt-2" (click)="tx['@voutLimit'] = false;"><span i18n="show-all">Show all</span> ({{ tx.vout.length }})</button>
+                <button class="btn btn-sm btn-primary mt-2" (click)="showMoreOutputs(tx)"><span i18n="show-more">Show more</span> ({{ getVoutLimit(tx, true) }} / {{ tx.vout.length }})</button>
               </td>
             </tr>
           </tbody>
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 9f1245532..e81a79c71 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -18,6 +18,7 @@ import { ApiService } from '../../services/api.service';
 export class TransactionsListComponent implements OnInit, OnChanges {
   network = '';
   nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
+  showMoreIncrement = 40;
 
   @Input() transactions: Transaction[];
   @Input() showConfirmations = false;
@@ -218,6 +219,22 @@ export class TransactionsListComponent implements OnInit, OnChanges {
       });
   }
 
+  showMoreInputs(tx: Transaction): void {
+    tx['@vinLimit'] = this.getVinLimit(tx, true);
+  }
+
+  showMoreOutputs(tx: Transaction): void {
+    tx['@voutLimit'] = this.getVoutLimit(tx, true);
+  }
+
+  getVinLimit(tx: Transaction, next = false): number {
+    return Math.min(Math.max(tx['@vinLimit'] || 0, this.inputRowLimit) + (next ? this.showMoreIncrement : 0), tx.vin.length);
+  }
+
+  getVoutLimit(tx: Transaction, next = false): number {
+    return Math.min(Math.max(tx['@voutLimit'] || 0, this.outputRowLimit) + (next ? this.showMoreIncrement : 0), tx.vout.length);
+  }
+
   ngOnDestroy(): void {
     this.outspendsSubscription.unsubscribe();
   }

From d1072863449dacc3f521982eebedad6aa7c9c7c8 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 22 Nov 2022 14:47:31 +0900
Subject: [PATCH 2/4] Load 1000 more inputs/outputs per click. Fix label i18n.

---
 .../transactions-list.component.html             | 16 ++++++++++++++--
 .../transactions-list.component.ts               |  2 +-
 2 files changed, 15 insertions(+), 3 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 80bec2d28..cd2d58f2f 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -148,7 +148,13 @@
             </ng-template>
             <tr *ngIf="tx.vin.length > getVinLimit(tx)">
               <td colspan="3" class="text-center">
-                <button class="btn btn-sm btn-primary mt-2" (click)="showMoreInputs(tx)"><span i18n="show-more">Show more</span> ({{ getVinLimit(tx, true) }} / {{ tx.vin.length }})</button>
+                <button class="btn btn-sm btn-primary mt-2" (click)="showMoreInputs(tx)">
+                  <span *ngIf="getVinLimit(tx, true) >= tx.vin.length; else showMoreInputsLabel" i18n="show-all">Show all</span>
+                  <ng-template #showMoreInputsLabel>
+                    <span i18n="show-more">Show more</span>
+                  </ng-template>
+                  ({{ tx.vin.length - getVinLimit(tx) }} <span i18n="inputs-remaining">remaining</span> )
+                </button>
               </td>
             </tr>
           </tbody>
@@ -259,7 +265,13 @@
             </ng-template>
             <tr *ngIf="tx.vout.length > getVoutLimit(tx)">
               <td colspan="3" class="text-center">
-                <button class="btn btn-sm btn-primary mt-2" (click)="showMoreOutputs(tx)"><span i18n="show-more">Show more</span> ({{ getVoutLimit(tx, true) }} / {{ tx.vout.length }})</button>
+                <button class="btn btn-sm btn-primary mt-2" (click)="showMoreOutputs(tx)">
+                  <span *ngIf="getVoutLimit(tx, true) >= tx.vout.length; else showMoreOutputsLabel" i18n="show-all">Show all</span>
+                  <ng-template #showMoreOutputsLabel>
+                    <span i18n="show-more">Show more</span>
+                  </ng-template>
+                  ({{ tx.vout.length - getVoutLimit(tx) }} <span i18n="outputs-remaining">remaining</span> )
+                </button>
               </td>
             </tr>
           </tbody>
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 e81a79c71..0d9d60c95 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -18,7 +18,7 @@ import { ApiService } from '../../services/api.service';
 export class TransactionsListComponent implements OnInit, OnChanges {
   network = '';
   nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
-  showMoreIncrement = 40;
+  showMoreIncrement = 1000;
 
   @Input() transactions: Transaction[];
   @Input() showConfirmations = false;

From 6cd1f9e8703d78d9ada0b6d2905d4eae02b2d0d4 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 22 Nov 2022 14:48:34 +0900
Subject: [PATCH 3/4] Fix load more inputs for non-esplora backends

---
 .../transactions-list.component.html          |  2 +-
 .../transactions-list.component.ts            | 30 ++++++++++++-------
 2 files changed, 21 insertions(+), 11 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 cd2d58f2f..139da368b 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -283,7 +283,7 @@
       <div class="float-left mt-2-5" *ngIf="!transactionPage && !tx.vin[0].is_coinbase && tx.fee !== -1">
         {{ tx.fee / (tx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [value]="tx.fee"></app-fiat></span></span>
       </div>
-      <div class="float-left mt-2-5 grey-info-text" *ngIf="tx.fee === -1" i18n="transactions-list.load-to-reveal-fee-info">Show all inputs to reveal fee data</div>
+      <div class="float-left mt-2-5 grey-info-text" *ngIf="tx.fee === -1" i18n="transactions-list.load-to-reveal-fee-info">Show more inputs to reveal fee data</div>
 
       <div class="float-right">
         <ng-container *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
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 0d9d60c95..be5bd5343 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -209,17 +209,19 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   }
 
   loadMoreInputs(tx: Transaction): void {
-    tx['@vinLimit'] = false;
-
-    this.electrsApiService.getTransaction$(tx.txid)
-      .subscribe((newTx) => {
-        tx.vin = newTx.vin;
-        tx.fee = newTx.fee;
-        this.ref.markForCheck();
-      });
+    if (!tx['@vinLoaded']) {
+      this.electrsApiService.getTransaction$(tx.txid)
+        .subscribe((newTx) => {
+          tx['@vinLoaded'] = true;
+          tx.vin = newTx.vin;
+          tx.fee = newTx.fee;
+          this.ref.markForCheck();
+        });
+    }
   }
 
   showMoreInputs(tx: Transaction): void {
+    this.loadMoreInputs(tx);
     tx['@vinLimit'] = this.getVinLimit(tx, true);
   }
 
@@ -228,11 +230,19 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   }
 
   getVinLimit(tx: Transaction, next = false): number {
-    return Math.min(Math.max(tx['@vinLimit'] || 0, this.inputRowLimit) + (next ? this.showMoreIncrement : 0), tx.vin.length);
+    if ((tx['@vinLimit'] || 0) > this.inputRowLimit) {
+      return Math.min(tx['@vinLimit'] + (next ? this.showMoreIncrement : 0), tx.vin.length);
+    } else {
+      return Math.min((next ? this.showMoreIncrement : this.inputRowLimit), tx.vin.length);
+    }
   }
 
   getVoutLimit(tx: Transaction, next = false): number {
-    return Math.min(Math.max(tx['@voutLimit'] || 0, this.outputRowLimit) + (next ? this.showMoreIncrement : 0), tx.vout.length);
+    if ((tx['@voutLimit'] || 0) > this.outputRowLimit) {
+      return Math.min(tx['@voutLimit'] + (next ? this.showMoreIncrement : 0), tx.vout.length);
+    } else {
+      return Math.min((next ? this.showMoreIncrement : this.outputRowLimit), tx.vout.length);
+    }
   }
 
   ngOnDestroy(): void {

From 01a727a344d961527a8156a03244e944d28270ca Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 22 Nov 2022 18:05:20 +0900
Subject: [PATCH 4/4] fix stray space, automatically show more outputs if <5
 remaining

---
 .../transactions-list.component.html           |  4 ++--
 .../transactions-list.component.ts             | 18 ++++++++++++++----
 2 files changed, 16 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 139da368b..8368a62c4 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -153,7 +153,7 @@
                   <ng-template #showMoreInputsLabel>
                     <span i18n="show-more">Show more</span>
                   </ng-template>
-                  ({{ tx.vin.length - getVinLimit(tx) }} <span i18n="inputs-remaining">remaining</span> )
+                  ({{ tx.vin.length - getVinLimit(tx) }} <span i18n="inputs-remaining">remaining</span>)
                 </button>
               </td>
             </tr>
@@ -270,7 +270,7 @@
                   <ng-template #showMoreOutputsLabel>
                     <span i18n="show-more">Show more</span>
                   </ng-template>
-                  ({{ tx.vout.length - getVoutLimit(tx) }} <span i18n="outputs-remaining">remaining</span> )
+                  ({{ tx.vout.length - getVoutLimit(tx) }} <span i18n="outputs-remaining">remaining</span>)
                 </button>
               </td>
             </tr>
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 be5bd5343..b09226f33 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -230,19 +230,29 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   }
 
   getVinLimit(tx: Transaction, next = false): number {
+    let limit;
     if ((tx['@vinLimit'] || 0) > this.inputRowLimit) {
-      return Math.min(tx['@vinLimit'] + (next ? this.showMoreIncrement : 0), tx.vin.length);
+      limit = Math.min(tx['@vinLimit'] + (next ? this.showMoreIncrement : 0), tx.vin.length);
     } else {
-      return Math.min((next ? this.showMoreIncrement : this.inputRowLimit), tx.vin.length);
+      limit = Math.min((next ? this.showMoreIncrement : this.inputRowLimit), tx.vin.length);
     }
+    if (tx.vin.length - limit <= 5) {
+      limit = tx.vin.length;
+    }
+    return limit;
   }
 
   getVoutLimit(tx: Transaction, next = false): number {
+    let limit;
     if ((tx['@voutLimit'] || 0) > this.outputRowLimit) {
-      return Math.min(tx['@voutLimit'] + (next ? this.showMoreIncrement : 0), tx.vout.length);
+      limit = Math.min(tx['@voutLimit'] + (next ? this.showMoreIncrement : 0), tx.vout.length);
     } else {
-      return Math.min((next ? this.showMoreIncrement : this.outputRowLimit), tx.vout.length);
+      limit = Math.min((next ? this.showMoreIncrement : this.outputRowLimit), tx.vout.length);
     }
+    if (tx.vout.length - limit <= 5) {
+      limit = tx.vout.length;
+    }
+    return limit;
   }
 
   ngOnDestroy(): void {