Merge branch 'master' into natsoni/fix-pool-page-update

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/search-form/search-form.component.ts

@@ -195,7 +195,6 @@ export class SearchFormComponent implements OnInit {
           const matchesTxId = this.regexTransaction.test(searchText) && !this.regexBlockhash.test(searchText);
           const matchesBlockHash = this.regexBlockhash.test(searchText);
           const matchesAddress = !matchesTxId && this.regexAddress.test(searchText);
-          const publicKey = matchesAddress && searchText.startsWith('0');
           const otherNetworks = findOtherNetworks(searchText, this.network as any || 'mainnet', this.env);
           const liquidAsset = this.assets ? (this.assets[searchText] || []) : [];
           const pools = this.pools.filter(pool => pool["name"].toLowerCase().includes(searchText.toLowerCase())).slice(0, 10);
@@ -204,10 +203,6 @@ export class SearchFormComponent implements OnInit {
             searchText = searchText.replace(/\//g, '-');
           }
 
-          if (publicKey) {
-            otherNetworks.length = 0;
-          }
-
           return {
             searchText: searchText,
             hashQuickMatch: +(matchesBlockHeight || matchesBlockHash || matchesTxId || matchesAddress || matchesUnixTimestamp || matchesDateTime),
@@ -217,7 +212,6 @@ export class SearchFormComponent implements OnInit {
             txId: matchesTxId,
             blockHash: matchesBlockHash,
             address: matchesAddress,
-            publicKey: publicKey,
             addresses: matchesAddress && addressPrefixSearchResults.length === 1 && searchText === addressPrefixSearchResults[0] ? [] : addressPrefixSearchResults, // If there is only one address and it matches the search text, don't show it in the dropdown
             otherNetworks: otherNetworks,
             nodes: lightningResults.nodes,

frontend/src/app/components/search-form/search-results/search-results.component.html

@@ -23,7 +23,7 @@
       <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container>
     </button>
   </ng-template>
-  <ng-template [ngIf]="results.address && !results.publicKey">
+  <ng-template [ngIf]="results.address">
     <div class="card-title" i18n="search.bitcoin-address">{{ networkName }} Address</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
       <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : isMobile ? 17 : 30 }"></ng-container>
@@ -35,26 +35,26 @@
       <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container>
     </button>
   </ng-template>
-  <ng-template [ngIf]="results.addresses.length">
-    <div class="card-title" i18n="search.bitcoin-addresses">{{ networkName }} Addresses</div>
-    <ng-template ngFor [ngForOf]="results.addresses" let-address let-i="index">
-      <button (click)="clickItem(results.hashQuickMatch + i)" [class.active]="(results.hashQuickMatch + i) === activeIdx" type="button" role="option" class="dropdown-item">
-        <ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="results.searchText"></ngb-highlight>
+  <ng-template [ngIf]="results.otherNetworks.length">
+    <div class="card-title danger" i18n="search.other-networks">Other Network Address</div>
+    <ng-template ngFor [ngForOf]="results.otherNetworks" let-otherNetwork let-i="index">
+      <button (click)="clickItem(results.hashQuickMatch + i)" [class.active]="(results.hashQuickMatch + i) === activeIdx" [class.inactive]="!otherNetwork.isNetworkAvailable" type="button" role="option" class="dropdown-item">
+        <ng-container *ngTemplateOutlet="goTo; context: { $implicit: otherNetwork.address| shortenString : isMobile ? 12 : 20 }"></ng-container>&nbsp;<b>({{ otherNetwork.network.charAt(0).toUpperCase() + otherNetwork.network.slice(1) }})</b>
       </button>
     </ng-template>
   </ng-template>
-  <ng-template [ngIf]="results.pools.length">
-    <div class="card-title" i18n="search.mining-pools">Mining Pools</div>
-    <ng-template ngFor [ngForOf]="results.pools" let-pool let-i="index">
-      <button (click)="clickItem(results.hashQuickMatch + results.addresses.length + i)" [class.active]="results.hashQuickMatch + results.addresses.length + i === activeIdx" [class.inactive]="!pool.active" type="button" role="option" class="dropdown-item">
-        <ngb-highlight [result]="pool.name" [term]="results.searchText"></ngb-highlight>
+  <ng-template [ngIf]="results.addresses.length">
+    <div class="card-title" i18n="search.bitcoin-addresses">{{ networkName }} Addresses</div>
+    <ng-template ngFor [ngForOf]="results.addresses" let-address let-i="index">
+      <button (click)="clickItem(results.hashQuickMatch + results.otherNetworks.length + i)" [class.active]="(results.hashQuickMatch + results.otherNetworks.length + i) === activeIdx" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="results.searchText"></ngb-highlight>
       </button>
     </ng-template>
   </ng-template>
   <ng-template [ngIf]="results.nodes.length">
     <div class="card-title" i18n="search.lightning-nodes">Lightning Nodes</div>
     <ng-template ngFor [ngForOf]="results.nodes" let-node let-i="index">
-      <button (click)="clickItem(results.hashQuickMatch + results.addresses.length + results.pools.length + i)" [class.inactive]="node.status === 0" [class.active]="results.hashQuickMatch + results.addresses.length + results.pools.length + i === activeIdx" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" type="button" role="option" class="dropdown-item">
+      <button (click)="clickItem(results.hashQuickMatch + results.otherNetworks.length + results.addresses.length + i)" [class.inactive]="node.status === 0" [class.active]="results.hashQuickMatch + results.otherNetworks.length + results.addresses.length + i === activeIdx" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" type="button" role="option" class="dropdown-item">
         <ngb-highlight [result]="node.alias" [term]="results.searchText"></ngb-highlight> &nbsp;<span class="symbol">{{ node.public_key | shortenString : 10 }}</span>
       </button>
     </ng-template>
@@ -62,25 +62,19 @@
   <ng-template [ngIf]="results.channels.length">
     <div class="card-title" i18n="search.lightning-channels">Lightning Channels</div>
     <ng-template ngFor [ngForOf]="results.channels" let-channel let-i="index">
-      <button (click)="clickItem(results.hashQuickMatch + results.addresses.length + results.pools.length + results.nodes.length + i)" [class.inactive]="channel.status === 2" [class.active]="results.hashQuickMatch + results.addresses.length + results.pools.length + results.nodes.length + i === activeIdx" type="button" role="option" class="dropdown-item">
+      <button (click)="clickItem(results.hashQuickMatch + results.otherNetworks.length + results.addresses.length + results.nodes.length + i)" [class.inactive]="channel.status === 2"  [class.active]="results.hashQuickMatch + results.otherNetworks.length + results.addresses.length + results.nodes.length + i === activeIdx" type="button" role="option" class="dropdown-item">
         <ngb-highlight [result]="channel.short_id" [term]="results.searchText"></ngb-highlight> &nbsp;<span class="symbol">{{ channel.id }}</span>
       </button>
     </ng-template>
   </ng-template>
-  <ng-template [ngIf]="results.otherNetworks.length">
-    <div class="card-title danger" i18n="search.other-networks">Other Network Address</div>
-    <ng-template ngFor [ngForOf]="results.otherNetworks" let-otherNetwork let-i="index">
-      <button (click)="clickItem(results.hashQuickMatch + results.addresses.length + results.pools.length + results.nodes.length + results.channels.length + i)" [class.active]="(results.hashQuickMatch + results.addresses.length + results.pools.length + results.nodes.length + results.channels.length + i) === activeIdx" [class.inactive]="!otherNetwork.isNetworkAvailable" type="button" role="option" class="dropdown-item">
-        <ng-container *ngTemplateOutlet="goTo; context: { $implicit: otherNetwork.address | shortenString : isMobile ? 12 : 20 }"></ng-container>&nbsp;<b>({{ otherNetwork.network.charAt(0).toUpperCase() + otherNetwork.network.slice(1) }})</b>
+  <ng-template [ngIf]="results.pools.length">
+    <div class="card-title" i18n="search.mining-pools">Mining Pools</div>
+    <ng-template ngFor [ngForOf]="results.pools" let-pool let-i="index">
+      <button (click)="clickItem(results.hashQuickMatch + results.otherNetworks.length + results.addresses.length + results.nodes.length + results.channels.length + i)" [class.active]="results.hashQuickMatch + results.otherNetworks.length + results.addresses.length + results.nodes.length + results.channels.length + i === activeIdx" [class.inactive]="!pool.active" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="pool.name" [term]="results.searchText"></ngb-highlight>
       </button>
     </ng-template>
   </ng-template>
-  <ng-template [ngIf]="results.address && results.publicKey">
-    <div class="card-title" i18n="search.bitcoin-address">{{ networkName }} Address</div>
-    <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
-      <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : isMobile ? 17 : 30 }"></ng-container>
-    </button>
-  </ng-template>
   <ng-template [ngIf]="results.liquidAsset.length">
     <div class="card-title" i18n="search.liquid-asset">Liquid Asset</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">

frontend/src/app/components/search-form/search-results/search-results.component.ts

@@ -27,7 +27,7 @@ export class SearchResultsComponent implements OnChanges {
   ngOnChanges() {
     this.activeIdx = 0;
     if (this.results) {
-      this.resultsFlattened = [...(this.results.hashQuickMatch ? [this.results.searchText] : []), ...this.results.addresses, ...this.results.pools, ...this.results.nodes, ...this.results.channels, ...this.results.otherNetworks];
+      this.resultsFlattened = [...(this.results.hashQuickMatch ? [this.results.searchText] : []), ...this.results.otherNetworks, ...this.results.addresses, ...this.results.nodes, ...this.results.channels, ...this.results.pools];
     }
   }
 

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);