Merge branch 'master' into natsoni/fix-lightning-search

frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html

@@ -1,8 +1,8 @@
 <table>
   <tbody>
     <tr>
-      <td class="td-width" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td>
-      <td>
+      <td class="td-width field-label" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td>
+      <td class="field-value">
         <div class="effective-fee-container">
           @if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize)) {
             <app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
@@ -11,24 +11,30 @@
           }
         </div>
       </td>
-      <td rowspan="2" *ngIf="tx && (tx.acceleratedBy || accelerationInfo) && miningStats" class="text-right" style="width: 100%;">
-        <div class="chart-container" style="width: 100px; margin-left:auto;">
-          <div
-            echarts
-            *browserOnly
-            class="chart"
-            [initOpts]="chartInitOptions"
-            [options]="chartOptions"
-            style="height: 72px"
-            (chartInit)="onChartInit($event)"
-          ></div>
+      <td class="pie-chart" rowspan="2">
+        <div class="chart-container">
+          @if (tx && (tx.acceleratedBy || accelerationInfo) && miningStats) {
+            <div
+              echarts
+              *browserOnly
+              class="chart"
+              [initOpts]="chartInitOptions"
+              [options]="chartOptions"
+              style="height: 72px; width: 72px;"
+              (chartInit)="onChartInit($event)"
+            ></div>
+          } @else {
+            <div class="chart-loading">
+              <div class="spinner-border text-light"></div>
+            </div>
+          }
         </div>
       </td>
     </tr>
     <tr>
-      <td class="td-width" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td>
-      <td *ngIf="acceleratedByPercentage">
-        {{ acceleratedByPercentage }} <span class="symbol">of hashrate</span>
+      <td class="td-width field-label" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td>
+      <td class="field-value" *ngIf="acceleratedByPercentage">
+        {{ acceleratedByPercentage }} <span class="symbol hashrate-label">of hashrate</span>
       </td>
     </tr>
   </tbody>

frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss

@@ -1,9 +1,50 @@
 .td-width {
-	width: 150px;
-	min-width: 150px;
+  width: 150px;
+  min-width: 150px;
 
-	@media (max-width: 768px) {
-	  width: 175px;
-	  min-width: 175px;
-	}
+  @media (max-width: 768px) {
+    width: 175px;
+    min-width: 175px;
+  }
+}
+
+.field-label {
+  @media (max-width: 849px) {
+    text-align: left;    
+  }
+  @media (max-width: 649px) {
+    width: auto;
+    min-width: auto;
+  }
+}
+
+.field-value {
+  @media (max-width: 849px) {
+    width: 100%;
+  }
+
+  .hashrate-label {
+    @media (max-width: 420px) {
+      display: none;
+    }
+  }
+}
+
+.pie-chart {
+  width: 100%;
+  vertical-align: middle;
+  text-align: center;
+
+  .chart-container {
+    width: 72px;
+    height: 100%;
+    margin-left: auto;
+  }
+
+  @media (max-width: 850px) {
+    width: 150px;
+  }
+  @media (max-width: 420px) {
+    padding-left: 0;
+  }
 }

frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts

@@ -83,7 +83,7 @@ export class ActiveAccelerationBox implements OnChanges {
     this.acceleratedByPercentage = ((totalAcceleratedHashrate / parseFloat(this.miningStats.lastEstimatedHashrate)) * 100).toFixed(1) + '%';
     data.push(getDataItem(
       totalAcceleratedHashrate,
-      'var(--tertiary)',
+      'var(--mainnet-alt)',
       `${this.acceleratedByPercentage} accelerating`,
     ) as PieSeriesOption);
     const notAcceleratedByPercentage = ((1 - (totalAcceleratedHashrate / parseFloat(this.miningStats.lastEstimatedHashrate))) * 100).toFixed(1) + '%';

frontend/src/app/components/blockchain/blockchain.component.scss

@@ -71,7 +71,7 @@
   color: var(--fg);
   font-size: 0.8rem;
   position: absolute;
-  bottom: 15.8em;
+  bottom: 16.1em;
   left: 1px;
   transform: translateX(-50%) rotate(90deg);
   background: none;

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { echarts, EChartsOption } from '../../graphs/echarts';
-import { BehaviorSubject, Observable, combineLatest, of, timer } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription, combineLatest, of } from 'rxjs';
 import { catchError, distinctUntilChanged, filter, map, share, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended, PoolStat } from '../../interfaces/node-api.interface';
 import { ApiService } from '../../services/api.service';
@@ -28,6 +28,7 @@ export class PoolComponent implements OnInit {
   gfg = true;
 
   formatNumber = formatNumber;
+  slugSubscription: Subscription;
   poolStats$: Observable<PoolStat>;
   blocks$: Observable<BlockExtended[]>;
   oobFees$: Observable<AccelerationTotal[]>;
@@ -56,38 +57,24 @@ export class PoolComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.poolStats$ = this.route.params.pipe(map((params) => params.slug))
+    this.slugSubscription = this.route.params.pipe(map((params) => params.slug)).subscribe((slug) => {
+      this.isLoading = true;
+      this.blocks = [];
+      this.chartOptions = {};  
+      this.slug = slug;
+      this.initializeObservables();
+    });
+  }
+
+  initializeObservables(): void {
+    this.poolStats$ = this.apiService.getPoolHashrate$(this.slug)
       .pipe(
-        switchMap((slug: any) => {
-          this.isLoading = true;
-          this.slug = slug;
-          return this.apiService.getPoolHashrate$(this.slug)
-            .pipe(
-              switchMap((data) => {
-                this.isLoading = false;
-                const hashrate = data.map(val => [val.timestamp * 1000, val.avgHashrate]);
-                const share = data.map(val => [val.timestamp * 1000, val.share * 100]);
-                this.prepareChartOptions(hashrate, share);
-                return [slug];
-              }),
-              catchError(() => {
-                this.isLoading = false;
-                this.seoService.logSoft404();
-                return of([slug]);
-              })
-            );
-        }),
-        switchMap((slug) => {
-          return this.apiService.getPoolStats$(slug).pipe(
-            catchError(() => {
-              this.isLoading = false;
-              this.seoService.logSoft404();
-              return of(null);
-            })
-          );
-        }),
-        tap(() => {
-          this.loadMoreSubject.next(this.blocks[0]?.height);
+        switchMap((data) => {
+          this.isLoading = false;
+          const hashrate = data.map(val => [val.timestamp * 1000, val.avgHashrate]);
+          const share = data.map(val => [val.timestamp * 1000, val.share * 100]);
+          this.prepareChartOptions(hashrate, share);
+          return this.apiService.getPoolStats$(this.slug);
         }),
         map((poolStats) => {
           this.seoService.setTitle(poolStats.pool.name);
@@ -101,7 +88,12 @@ export class PoolComponent implements OnInit {
           return Object.assign({
             logo: `/resources/mining-pools/` + poolStats.pool.slug + '.svg'
           }, poolStats);
-        })
+        }),
+        catchError(() => {
+          this.isLoading = false;
+          this.seoService.logSoft404();
+          return of(null);
+        }),
       );
 
     this.blocks$ = this.loadMoreSubject
@@ -328,4 +320,8 @@ export class PoolComponent implements OnInit {
   trackByBlock(index: number, block: BlockExtended) {
     return block.height;
   }
+
+  ngOnDestroy(): void {
+    this.slugSubscription.unsubscribe();
+  }
 }

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

@@ -380,7 +380,12 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
           this.txInBlockIndex = this.mempoolPosition.block;
 
           if (txPosition.cpfp !== undefined) {
+            if (txPosition.position.acceleratedBy) {
+              txPosition.cpfp.acceleratedBy = txPosition.position.acceleratedBy;
+            }
             this.setCpfpInfo(txPosition.cpfp);
+          } else if ((this.tx?.acceleration && txPosition.position.acceleratedBy)) {
+            this.tx.acceleratedBy = txPosition.position.acceleratedBy;
           }
         }
       } else {

frontend/src/app/lightning/group/group.component.ts

@@ -80,6 +80,12 @@ export class GroupComponent implements OnInit {
               };
             }
           }
+
+          nodes.map((node) => {
+            node.channels = node.opened_channel_count;
+            return node;
+          });
+
           const sumLiquidity = nodes.reduce((partialSum, a) => partialSum + parseInt(a.capacity, 10), 0);
           const sumChannels = nodes.reduce((partialSum, a) => partialSum + a.opened_channel_count, 0);