Merge branch 'master' into simon/lightning-stats-truncation

frontend/src/app/components/difficulty/difficulty.component.html

@@ -4,7 +4,7 @@
     <div class="card-body more-padding">
       <div class="difficulty-adjustment-container" *ngIf="(isLoadingWebSocket$ | async) === false && (difficultyEpoch$ | async) as epochData; else loadingDifficulty">
         <div class="epoch-progress">
-          <svg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 234 9" shape-rendering="crispEdges" preserveAspectRatio="none">
+          <svg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 224 9" shape-rendering="crispEdges" preserveAspectRatio="none">
             <defs>
               <linearGradient id="diff-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
                 <stop offset="0%" stop-color="#105fb0" />

frontend/src/app/components/difficulty/difficulty.component.ts

@@ -102,7 +102,7 @@ export class DifficultyComponent implements OnInit {
           this.expectedHeight = newExpectedHeight;
           this.currentHeight = this.stateService.latestBlockHeight;
           this.currentIndex = this.currentHeight - this.epochStart;
-          this.expectedIndex = Math.min(this.expectedHeight - this.epochStart, 2106) - 1;
+          this.expectedIndex = Math.min(this.expectedHeight - this.epochStart, 2016) - 1;
           this.difference = this.currentIndex - this.expectedIndex;
 
           this.shapes = [];
@@ -115,7 +115,7 @@ export class DifficultyComponent implements OnInit {
           this.shapes = this.shapes.concat(this.blocksToShapes(
             this.expectedIndex + 1, this.currentIndex, 'ahead', false
           ));
-          if (this.currentIndex < 2105) {
+          if (this.currentIndex < 2015) {
             this.shapes = this.shapes.concat(this.blocksToShapes(
               this.currentIndex + 1, this.currentIndex + 1, 'next', (this.expectedIndex > this.currentIndex)
             ));

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -4,7 +4,6 @@
 
   <div class="row row-cols-1 row-cols-md-2">
 
-    <!-- Temporary stuff here - Will be moved to a component once we have more useful data to show -->
     <div class="col">
       <div class="main-title">
         <span [attr.data-cy]="'reward-stats'" i18n="mining.reward-stats">Reward stats</span>&nbsp;

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { StateService } from '../../services/state.service';
 import { CacheService } from '../../services/cache.service';
-import { Observable, ReplaySubject, BehaviorSubject, merge, Subscription, of } from 'rxjs';
+import { Observable, ReplaySubject, BehaviorSubject, merge, Subscription, of, forkJoin } from 'rxjs';
 import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.interface';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { environment } from '../../../environments/environment';
@@ -70,12 +70,19 @@ export class TransactionsListComponent implements OnInit, OnChanges {
         .pipe(
           switchMap((txIds) => {
             if (!this.cached) {
-              return this.apiService.getOutspendsBatched$(txIds);
+              // break list into batches of 50 (maximum supported by esplora)
+              const batches = [];
+              for (let i = 0; i < txIds.length; i += 50) {
+                batches.push(txIds.slice(i, i + 50));
+              }
+              return forkJoin(batches.map(batch => this.apiService.getOutspendsBatched$(batch)));
             } else {
               return of([]);
             }
           }),
-          tap((outspends: Outspend[][]) => {
+          tap((batchedOutspends: Outspend[][][]) => {
+            // flatten batched results back into a single array
+            const outspends = batchedOutspends.flat(1);
             if (!this.transactions) {
               return;
             }

frontend/src/app/lightning/channels-list/channels-list.component.html

@@ -36,25 +36,25 @@
 <ng-template #tableHeader>
   <thead>
     <th class="alias text-left" i18n="lightning.alias">Alias</th>
-    <th class="alias text-left d-none d-md-table-cell">&nbsp;</th>
-    <th class="alias text-left d-none d-md-table-cell" i18n="status">Status</th>
-    <th *ngIf="status !== 'closed'" class="channels text-left d-none d-md-table-cell" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
-    <th *ngIf="status === 'closed'" class="channels text-left d-none d-md-table-cell" i18n="channels.closing_date">Closing date</th>
-    <th class="capacity text-right d-none d-md-table-cell" i18n="lightning.capacity">Capacity</th>
-    <th class="capacity text-right" i18n="channels.id">Channel ID</th>
+    <th class="nodedetails text-left">&nbsp;</th>
+    <th class="status text-left" i18n="status">Status</th>
+    <th class="feerate text-left" *ngIf="status !== 'closed'" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
+    <th class="feerate text-left" *ngIf="status === 'closed'" i18n="channels.closing_date">Closing date</th>
+    <th class="liquidity text-right" i18n="lightning.capacity">Capacity</th>
+    <th class="channelid text-right" i18n="channels.id">Channel ID</th>
   </thead>
 </ng-template>
 
 <ng-template #tableTemplate let-channel let-node="node">
   <td class="alias text-left">
-    <div>{{ node.alias || '?' }}</div>
+    <app-truncate [text]="node.alias || '?'" [maxWidth]="200" [lastChars]="6"></app-truncate>
     <div class="second-line">
       <app-truncate [text]="node.public_key" [maxWidth]="200" [lastChars]="6" [link]="['/lightning/node' | relativeUrl, node.public_key]">
         <app-clipboard [text]="node.public_key" size="small"></app-clipboard>
       </app-truncate>
     </div>
   </td>
-  <td class="alias text-left d-none d-md-table-cell">
+  <td class="nodedetails text-left">
     <div class="second-line"><ng-container *ngTemplateOutlet="xChannels; context: {$implicit: node.channels }"></ng-container></div>
     <div class="second-line">
       <app-amount *ngIf="node.capacity > 100000000; else smallnode" [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
@@ -64,7 +64,7 @@
       </ng-template>
     </div>
   </td>
-  <td class="d-none d-md-table-cell">
+  <td class="status">
     <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
     <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
     <ng-template [ngIf]="channel.status === 2">
@@ -74,20 +74,20 @@
       </ng-template>
     </ng-template>
   </td>
-  <td *ngIf="status !== 'closed'" class="capacity text-left d-none d-md-table-cell">
+  <td *ngIf="status !== 'closed'" class="feerate text-left">
     {{ channel.fee_rate }} <span class="symbol">ppm ({{ channel.fee_rate / 10000 | number }}%)</span>
   </td>
-  <td *ngIf="status === 'closed'" class="capacity text-left d-none d-md-table-cell">
+  <td *ngIf="status === 'closed'" class="feerate text-left">
     <app-timestamp [unixTime]="channel.closing_date"></app-timestamp>
   </td>
-  <td class="capacity text-right d-none d-md-table-cell">
+  <td class="liquidity text-right">
     <app-amount *ngIf="channel.capacity > 100000000; else smallchannel" [satoshis]="channel.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
     <ng-template #smallchannel>
       {{ channel.capacity | amountShortener: 1 }}
       <span class="sats" i18n="shared.sats">sats</span>
     </ng-template>
-</td>
-  <td class="capacity text-right">
+  </td>
+  <td class="channelid text-right">
     <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.short_id }}</a>
    </td>
 </ng-template>
@@ -100,19 +100,19 @@
       <td class="alias text-left" style="width: 370px;">
         <span class="skeleton-loader"></span>
       </td>
-      <td class="alias text-left">
+      <td class="nodedetails text-left">
         <span class="skeleton-loader"></span>
       </td>
-      <td class="capacity text-left d-none d-md-table-cell">
+      <td class="status text-left">
         <span class="skeleton-loader"></span>
       </td>
-      <td class="channels text-left d-none d-md-table-cell">
+      <td class="feerate text-left">
         <span class="skeleton-loader"></span>
       </td>
-      <td class="channels text-right d-none d-md-table-cell">
+      <td class="liquidity text-right">
         <span class="skeleton-loader"></span>
       </td>
-      <td class="channels text-left">
+      <td class="channelid text-left">
         <span class="skeleton-loader"></span>
       </td>
     </tr>

frontend/src/app/lightning/channels-list/channels-list.component.scss

@@ -31,4 +31,36 @@
   @media (max-width: 435px) {
     flex-grow: 1;
   }
+}
+
+.alias {
+  padding-left: 0;
+}
+
+.feerate {
+  @media (max-width: 815px) {
+    display: none;
+  }
+}
+
+.status {
+  @media (max-width: 710px) {
+    display: none;
+  }
+}
+
+.nodedetails {
+  @media (max-width: 600px) {
+    display: none;
+  }
+}
+
+.liquidity {
+  @media (max-width: 500px) {
+    display: none;
+  }
+}
+
+.channelid {
+  padding-right: 0;
 }

frontend/src/app/lightning/node/node.component.html

@@ -57,7 +57,7 @@
             </tr>
             <tr *ngIf="(avgChannelDistance$ | async) as avgDistance;">
               <td i18n="lightning.avg-distance" class="text-truncate">Avg channel distance</td>
-              <td class="direction-ltr">{{ avgDistance | number : '1.0-0' }} <span class="symbol">km</span> <span class="separator">/</span> {{ kmToMiles(avgDistance) | number : '1.0-0' }} <span class="symbol">mi</span></td>
+              <td class="direction-ltr">{{ avgDistance | amountShortener: 1 }} <span class="symbol">km</span> <span class="separator">·</span>{{ kmToMiles(avgDistance) | amountShortener: 1 }} <span class="symbol">mi</span></td>
             </tr>
           </tbody>
         </table>

frontend/src/app/lightning/node/node.component.scss

@@ -108,5 +108,6 @@ app-fiat {
 }
 
 .separator {
-  margin: 0 1em;
+  margin: 0 0.25em;
+  color: slategrey;
 }