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] "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();
   }