Fixes multiple bugs with outspends and channels

fixes #412

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

@@ -27,7 +27,6 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   @Input() outputIndex: number;
   @Input() address: string = '';
   @Input() rowLimit = 12;
-  @Input() channels: { inputs: any[], outputs: any[] };
 
   @Output() loadMore = new EventEmitter();
 
@@ -36,8 +35,8 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   refreshOutspends$: ReplaySubject<string[]> = new ReplaySubject();
   refreshChannels$: ReplaySubject<string[]> = new ReplaySubject();
   showDetails$ = new BehaviorSubject<boolean>(false);
-  outspends: Outspend[][] = [];
   assetsMinimal: any;
+  transactionsLength: number = 0;
 
   constructor(
     public stateService: StateService,
@@ -47,7 +46,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     private ref: ChangeDetectorRef,
   ) { }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.latestBlock$ = this.stateService.blocks$.pipe(map(([block]) => block));
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
 
@@ -62,14 +61,17 @@ export class TransactionsListComponent implements OnInit, OnChanges {
         .pipe(
           switchMap((txIds) => this.apiService.getOutspendsBatched$(txIds)),
           tap((outspends: Outspend[][]) => {
-            this.outspends = this.outspends.concat(outspends);
+            const transactions = this.transactions.filter((tx) => !tx._outspends);
+            outspends.forEach((outspend, i) => {
+              transactions[i]._outspends = outspend;
+            });
           }),
         ),
       this.stateService.utxoSpent$
         .pipe(
           tap((utxoSpent) => {
             for (const i in utxoSpent) {
-              this.outspends[0][i] = {
+              this.transactions[0]._outspends[i] = {
                 spent: true,
                 txid: utxoSpent[i].txid,
                 vin: utxoSpent[i].vin,
@@ -81,21 +83,23 @@ export class TransactionsListComponent implements OnInit, OnChanges {
           .pipe(
             filter(() => this.stateService.env.LIGHTNING),
             switchMap((txIds) => this.apiService.getChannelByTxIds$(txIds)),
-            map((channels) => {
-              this.channels = channels;
+            tap((channels) => {
+              const transactions = this.transactions.filter((tx) => !tx._channels);
+              channels.forEach((channel, i) => {
+                transactions[i]._channels = channel;
+              });
             }),
           )
         ,
     ).subscribe(() => this.ref.markForCheck());
   }
 
-  ngOnChanges() {
+  ngOnChanges(): void {
     if (!this.transactions || !this.transactions.length) {
       return;
     }
-    if (this.paginated) {
-      this.outspends = [];
-    }
+
+    this.transactionsLength = this.transactions.length;
     if (this.outputIndex) {
       setTimeout(() => {
         const assetBoxElements = document.getElementsByClassName('assetBox');
@@ -126,14 +130,19 @@ export class TransactionsListComponent implements OnInit, OnChanges {
         tx['addressValue'] = addressIn - addressOut;
       }
     });
-    const txIds = this.transactions.map((tx) => tx.txid);
-    this.refreshOutspends$.next(txIds);
-    if (!this.channels) {
-      this.refreshChannels$.next(txIds);
+    const txIds = this.transactions.filter((tx) => !tx._outspends).map((tx) => tx.txid);
+    if (txIds.length) {
+      this.refreshOutspends$.next(txIds);
+    }
+    if (this.stateService.env.LIGHTNING) {
+      const txIds = this.transactions.filter((tx) => !tx._channels).map((tx) => tx.txid);
+      if (txIds.length) {
+        this.refreshChannels$.next(txIds);
+      }
     }
   }
 
-  onScroll() {
+  onScroll(): void {
     const scrollHeight = document.body.scrollHeight;
     const scrollTop = document.documentElement.scrollTop;
     if (scrollHeight > 0){
@@ -148,11 +157,11 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     return tx.vout.some((v: any) => v.value === undefined);
   }
 
-  getTotalTxOutput(tx: Transaction) {
+  getTotalTxOutput(tx: Transaction): number {
     return tx.vout.map((v: Vout) => v.value || 0).reduce((a: number, b: number) => a + b);
   }
 
-  switchCurrency() {
+  switchCurrency(): void {
     if (this.network === 'liquid' || this.network === 'liquidtestnet') {
       return;
     }
@@ -164,7 +173,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     return tx.txid + tx.status.confirmed;
   }
 
-  trackByIndexFn(index: number) {
+  trackByIndexFn(index: number): number {
     return index;
   }
 
@@ -177,7 +186,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     return Math.pow(base, exponent);
   }
 
-  toggleDetails() {
+  toggleDetails(): void {
     if (this.showDetails$.value === true) {
       this.showDetails$.next(false);
     } else {
@@ -185,7 +194,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     }
   }
 
-  loadMoreInputs(tx: Transaction) {
+  loadMoreInputs(tx: Transaction): void {
     tx['@vinLimit'] = false;
 
     this.electrsApiService.getTransaction$(tx.txid)
@@ -196,7 +205,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
       });
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.outspendsSubscription.unsubscribe();
   }
 }