Adding "load more" for large input/output sets.

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

@@ -16,7 +16,7 @@
       <div class="col">
         <table class="table table-borderless smaller-text table-xs" style="margin: 0;">
           <tbody>
-            <tr *ngFor="let vin of tx.vin">
+            <tr *ngFor="let vin of getFilteredTxVin(tx)">
               <td class="arrow-td">
                 <ng-template [ngIf]="vin.prevout === null" [ngIfElse]="hasPrevout">
                   <i class="arrow grey"></i>
@@ -47,6 +47,11 @@
                 <app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
               </td>
             </tr>
+            <tr *ngIf="tx.vin.length > tx['@vinLength']">
+              <td colspan="3" class="text-center">
+                <button class="btn btn-sm btn-primary" (click)="loadMoreVin(tx)">Load more</button>
+              </td>
+            </tr>
           </tbody>
         </table>
 
@@ -54,7 +59,7 @@
       <div class="col mobile-bottomcol">
         <table class="table table-borderless smaller-text table-xs"  style="margin: 0;">
           <tbody>
-            <tr *ngFor="let vout of tx.vout; let vindex = index;">
+            <tr *ngFor="let vout of getFilteredTxVout(tx); let vindex = index;">
               <td>
                 <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/', vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
                   <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
@@ -77,6 +82,11 @@
                 </ng-template>
               </td>
             </tr>
+            <tr *ngIf="tx.vout.length > tx['@voutLength']">
+              <td colspan="3" class="text-center">
+                <button class="btn btn-sm btn-primary" (click)="loadMoreVout(tx)">Load more</button>
+              </td>
+            </tr>
             <tr>
               <td class="text-right" colspan="4" style="vertical-align: bottom;">
                 <span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">

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

@@ -36,13 +36,11 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     }
     const observableObject = {};
     this.transactions.forEach((tx, i) => {
+      tx['@voutLength'] = 10;
+      tx['@vinLength'] = 10;
       if (this.outspends[i]) {
         return;
       }
-      if (tx.vin.length + tx.vout.length > 50) {
-        console.log('Too many outspends on transaction: ', tx.txid);
-        return;
-      }
       observableObject[i] = this.electrsApiService.getOutspends$(tx.txid);
     });
 
@@ -63,7 +61,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     this.loadMore.emit();
   }
 
-  getTotalTxOutput(tx: any) {
+  getTotalTxOutput(tx: Transaction) {
     return tx.vout.map((v: any) => v.value || 0).reduce((a: number, b: number) => a + b);
   }
 
@@ -75,4 +73,22 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   trackByFn(index: number, tx: Transaction) {
     return tx.txid + tx.status.confirmed;
   }
+
+  loadMoreVin(tx: Transaction) {
+    tx['@vinLength'] += 10;
+    this.ref.markForCheck();
+  }
+
+  loadMoreVout(tx: Transaction) {
+    tx['@voutLength'] += 10;
+    this.ref.markForCheck();
+  }
+
+  getFilteredTxVin(tx: Transaction) {
+    return tx.vin.slice(0, tx['@vinLength']);
+  }
+
+  getFilteredTxVout(tx: Transaction) {
+    return tx.vout.slice(0, tx['@voutLength']);
+  }
 }