Merge branch 'master' into simon/angular-17

backend/mempool-config.sample.json

@@ -153,7 +153,7 @@
     ]
   },
   "MEMPOOL_SERVICES": {
-    "API": "https://mempool.space/api",
+    "API": "https://mempool.space/api/v1/services",
     "ACCELERATIONS": false
   },
   "FIAT_PRICE": {

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts

@@ -156,7 +156,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
           let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(ticks[0].axisValue, 10))}</b><br>`;
 
           if (ticks[0].data[1] > 10_000_000) {
-            tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1] / 100_000_000, this.locale, '1.0-0')} BTC<br>`;
+            tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1] / 100_000_000, this.locale, '1.0-8')} BTC<br>`;
           } else {
             tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1], this.locale, '1.0-0')} sats<br>`;
           }

frontend/src/app/components/assets/assets-featured/assets-featured.component.html

@@ -1,5 +1,7 @@
 <div *ngIf="featuredAssets$ | async as featured; else loading" class="featuredBox">
-
+  <div *ngIf="featured.length === 0" class="text-center">
+    <div i18n="liquid.no-featured.assets" class="symbol">No featured assets</div>
+  </div>
   <div class="card" *ngFor="let group of featured">
     <ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
       <a [routerLink]="['/assets/group' | relativeUrl, group.id]">

frontend/src/app/components/assets/assets-featured/assets-featured.component.scss

@@ -47,3 +47,9 @@
 .ticker {
   color: grey;
 }
+
+.symbol {
+  color: grey;
+  font-size: 1.5rem;
+  font-style: italic;
+}

frontend/src/app/components/assets/assets-featured/assets-featured.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ApiService } from '../../../services/api.service';
+import { StateService } from '../../../services/state.service';
 
 @Component({
   selector: 'app-assets-featured',
@@ -12,10 +13,11 @@ export class AssetsFeaturedComponent implements OnInit {
 
   constructor(
     private apiService: ApiService,
+    private stateService: StateService,
   ) { }
 
   ngOnInit(): void {
-    this.featuredAssets$ = this.apiService.listFeaturedAssets$();
+    this.featuredAssets$ = this.apiService.listFeaturedAssets$(this.stateService.network);
   }
 
 }

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html

@@ -61,10 +61,10 @@
         </td>
       </tr>
       {{ activeFilters.rbf }}
-      <tr *ngIf="(!auditEnabled && tx && tx.status === 'accelerated') || filters.length">
+      <tr *ngIf="(!auditEnabled && tx && (tx.status === 'accelerated' || tx.acc || acceleration)) || filters.length">
         <td colspan="2">
           <div class="tags mt-2" [class.any-mode]="filterMode === 'or'">
-            <span *ngIf="!auditEnabled && tx && tx.status === 'accelerated'" class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span>
+            <span *ngIf="!auditEnabled && tx && (tx.status === 'accelerated' || tx.acc || acceleration)" class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span>
             <ng-container *ngFor="let filter of filters;">
               <span class="btn badge filter-tag" [class.matching]="activeFilters[filter.key]">{{ filter.label }}</span>
             </ng-container>

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss

@@ -9,8 +9,8 @@
   justify-content: space-between;
   padding: 10px 15px;
   text-align: left;
-  min-width: 320px;
-  max-width: 320px;
+  min-width: 340px;
+  max-width: 340px;
   pointer-events: none;
   z-index: 11;
 

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts

@@ -61,8 +61,8 @@ export class BlockOverviewTooltipComponent implements OnChanges {
       this.vsize = this.tx.vsize || 1;
       this.feeRate = this.fee / this.vsize;
       this.effectiveRate = this.tx.rate;
-      this.acceleration = this.tx.acc;
       const txFlags = BigInt(this.tx.flags) || 0n;
+      this.acceleration = this.tx.acc || (txFlags & TransactionFlags.acceleration);
       this.hasEffectiveRate = Math.abs((this.fee / this.vsize) - this.effectiveRate) > 0.05
         || (txFlags && (txFlags & (TransactionFlags.cpfp_child | TransactionFlags.cpfp_parent)) > 0n);
       this.filters = this.tx.flags ? toFilters(txFlags).filter(f => f.tooltip) : [];

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

@@ -56,7 +56,7 @@
               </div>
             </ng-template>
           </div>
-          </div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -1,7 +1,15 @@
-<div *ngIf="showTitle" class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
+<div *ngIf="showTitle && mode === 'difficulty'" class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
+<div *ngIf="showTitle && mode === 'halving'" class="main-title" i18n="dashboard.halving-countdown">Halving Countdown</div>
 <div class="card-wrapper">
   <div class="card">
-    <div class="card-body more-padding">
+    <div class="widget-toggler">
+      <a href="" (click)="setMode('difficulty')" class="toggler-option"
+        [ngClass]="{'inactive': mode === 'difficulty'}"><small i18n="statistics.average-small">difficulty</small></a>
+      <span style="color: #ffffff66; font-size: 8px"> | </span>
+      <a href="" (click)="setMode('halving')" class="toggler-option"
+        [ngClass]="{'inactive': mode === 'halving'}"><small i18n="statistics.median-small">halving</small></a>
+    </div>
+    <div *ngIf="mode === 'difficulty'; else halving" 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 #epochSvg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 224 9" shape-rendering="crispEdges" preserveAspectRatio="none">
@@ -76,6 +84,52 @@
   </div>
 </div>
 
+<ng-template #halving>
+  <div class="card-body more-padding">
+    <div class="difficulty-adjustment-container halving" *ngIf="(isLoadingWebSocket$ | async) === false && (difficultyEpoch$ | async) as epochData; else loadingDifficulty">
+      <div class="halving-progress">
+        <div class="background"></div>
+        <div class="remaining" [style]="{ left: ((210000 - epochData.blocksUntilHalving) / 2100).toFixed(2) + '%' }"></div>
+        <div class="label">
+          {{ ((210000 - epochData.blocksUntilHalving) / 2100).toFixed(2) }}%
+        </div>
+      </div>
+      <div class="difficulty-stats">
+        <div class="item">
+          <div class="card-text bigger">
+            <app-btc [satoshis]="312500000"></app-btc>
+          </div>
+          <div class="symbol">
+            <span i18n="difficulty-box.new-subsidy">New subsidy</span>
+          </div>
+        </div>
+        <div class="item">
+          <div class="card-text">
+            {{ epochData.blocksUntilHalving | number }}
+          </div>
+          <div class="symbol">
+            <span *ngIf="epochData.blocksUntilHalving > 1" i18n="shared.blocks-remaining">Blocks remaining</span>
+            <span *ngIf="epochData.blocksUntilHalving === 1" i18n="shared.block-remaining">Block remaining</span>
+          </div>
+        </div>
+        <div class="item">
+          <div class="card-text" i18n-ngbTooltip="mining.average-fee" placement="bottom">
+            <span>{{ epochData.timeUntilHalving | date }}</span>
+          </div>
+          <div class="symbol" *ngIf="epochData.blocksUntilHalving === 1; else approxTime">
+            <app-time kind="until" [time]="epochData.adjustedTimeAvg + now" [fastRender]="false" [fixedRender]="true" [precision]="1" minUnit="minute"></app-time>
+          </div>
+          <ng-template #approxTime>
+            <div class="symbol">
+              <app-time kind="until" [time]="epochData.timeUntilHalving" [fastRender]="false" [fixedRender]="true" [precision]="0" [numUnits]="2" [units]="['year', 'day', 'hour', 'minute']"></app-time>
+            </div>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
 <ng-template #loadingDifficulty>
   <div class="epoch-progress">
     <div class="skeleton-loader"></div>

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

@@ -168,7 +168,7 @@
   white-space: nowrap;
 }
 
-.epoch-progress {
+.epoch-progress, .halving-progress {
   width: 100%;
   height: 22px;
   margin-bottom: 12px;
@@ -212,4 +212,43 @@
 }
 .blocks-behind {
   color: #D81B60;
+}
+
+.halving-progress {
+  position: relative;
+  .background, .remaining {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+  }
+  .background {
+    background: linear-gradient(to right, #105fb0, #9339f4);
+    left: 0;
+    right: 0;
+  }
+  .remaining {
+    background: #2d3348;
+    right: 0;
+  }
+  .label {
+    position: relative;
+    margin: auto;
+  }
+}
+
+.widget-toggler {
+  font-size: 12px;
+  position: absolute;
+  top: -20px;
+  right: 3px;
+  text-align: right;
+}
+
+.toggler-option {
+  text-decoration: none;
+}
+
+.inactive {
+  color: #ffffff66;
 }

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

@@ -51,6 +51,10 @@ export class DifficultyComponent implements OnInit {
   isLoadingWebSocket$: Observable<boolean>;
   difficultyEpoch$: Observable<EpochProgress>;
 
+  mode: 'difficulty' | 'halving' = 'difficulty';
+  userSelectedMode: boolean = false;
+
+  now: number = Date.now();
   epochStart: number;
   currentHeight: number;
   currentIndex: number;
@@ -101,6 +105,11 @@ export class DifficultyComponent implements OnInit {
         const timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000);
         const newEpochStart = Math.floor(this.stateService.latestBlockHeight / EPOCH_BLOCK_LENGTH) * EPOCH_BLOCK_LENGTH;
         const newExpectedHeight = Math.floor(newEpochStart + da.expectedBlocks);
+        this.now = new Date().getTime();
+
+        if (blocksUntilHalving < da.remainingBlocks && !this.userSelectedMode) {
+          this.mode = 'halving';
+        }
 
         if (newEpochStart !== this.epochStart || newExpectedHeight !== this.expectedHeight || this.currentHeight !== this.stateService.latestBlockHeight) {
           this.epochStart = newEpochStart;
@@ -194,6 +203,12 @@ export class DifficultyComponent implements OnInit {
     return shapes;
   }
 
+  setMode(mode: 'difficulty' | 'halving'): boolean {
+    this.mode = mode;
+    this.userSelectedMode = true;
+    return false;
+  }
+
   @HostListener('pointerdown', ['$event'])
   onPointerDown(event): void {
     if (this.epochSvgElement?.nativeElement?.contains(event.target)) {

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -339,6 +339,9 @@ export class HashrateChartComponent implements OnInit {
             const newMin = Math.floor(value.min / selectedPowerOfTen.divider / 10);
             return newMin * selectedPowerOfTen.divider * 10;
           },
+          max: (value) => {
+            return value.max;
+          },
           type: 'value',
           axisLabel: {
             color: 'rgb(110, 112, 121)',
@@ -357,11 +360,18 @@ export class HashrateChartComponent implements OnInit {
           },
         },
         {
-          min: (value) => {
-            return value.min * 0.9;
-          },
           type: 'value',
           position: 'right',
+          min: (_) => {
+            const firstYAxisMin = this.chartInstance.getModel().getComponent('yAxis', 0).axis.scale.getExtent()[0];
+            const selectedPowerOfTen: any = selectPowerOfTen(firstYAxisMin);
+            const newMin = Math.floor(firstYAxisMin / selectedPowerOfTen.divider / 10)
+            return 600 / 2 ** 32 * newMin * selectedPowerOfTen.divider * 10;
+          },
+          max: (_) => {
+            const firstYAxisMax = this.chartInstance.getModel().getComponent('yAxis', 0).axis.scale.getExtent()[1];
+            return 600 / 2 ** 32 * firstYAxisMax;
+          },
           axisLabel: {
             color: 'rgb(110, 112, 121)',
             formatter: (val): string => {

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

@@ -32,6 +32,7 @@
 }
 
 .chart {
+  margin-top: 10px;
   margin-bottom: 20px;
   @media (max-width: 768px) {
     margin-bottom: 10px;

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

@@ -65,7 +65,9 @@ export class PoolComponent implements OnInit {
             .pipe(
               switchMap((data) => {
                 this.isLoading = false;
-                this.prepareChartOptions(data.map(val => [val.timestamp * 1000, val.avgHashrate]));
+                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(() => {
@@ -130,9 +132,9 @@ export class PoolComponent implements OnInit {
     );
   }
 
-  prepareChartOptions(data) {
+  prepareChartOptions(hashrate, share) {
     let title: object;
-    if (data.length <= 1) {
+    if (hashrate.length <= 1) {
       title = {
         textStyle: {
           color: 'grey',
@@ -177,26 +179,57 @@ export class PoolComponent implements OnInit {
         },
         borderColor: '#000',
         formatter: function (ticks: any[]) {
-          let hashratePowerOfTen: any = selectPowerOfTen(1);
-          let hashrate = ticks[0].data[1];
-
-          hashratePowerOfTen = selectPowerOfTen(ticks[0].data[1], 10);
-          hashrate = ticks[0].data[1] / hashratePowerOfTen.divider;
+          let hashrateString = '';
+          let dominanceString = '';
 
+          for (const tick of ticks) {
+            if (tick.seriesIndex === 0) {
+              let hashratePowerOfTen = selectPowerOfTen(tick.data[1], 10);
+              let hashrateData = tick.data[1] / hashratePowerOfTen.divider;
+              hashrateString = `${tick.marker} ${tick.seriesName}: ${formatNumber(hashrateData, this.locale, '1.0-0')} ${hashratePowerOfTen.unit}H/s<br>`;
+            } else if (tick.seriesIndex === 1) {
+              dominanceString = `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-2')}%`;
+            }             
+          }
+          
           return `
             <b style="color: white; margin-left: 18px">${ticks[0].axisValueLabel}</b><br>
-            <span>${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(hashrate, this.locale, '1.0-0')} ${hashratePowerOfTen.unit}H/s</span><br>
+            <span>${hashrateString}</span>
+            <span>${dominanceString}</span>
           `;
         }.bind(this)
       },
-      xAxis: data.length <= 1 ? undefined : {
+      xAxis: hashrate.length <= 1 ? undefined : {
         type: 'time',
         splitNumber: (this.isMobile()) ? 5 : 10,
         axisLabel: {
           hideOverlap: true,
         }
       },
-      yAxis: data.length <= 1 ? undefined : [
+      legend: {
+        data: [
+          {
+            name: $localize`:mining.hashrate:Hashrate`,
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+            itemStyle: {
+              color: '#FFB300',
+            },
+          },
+          {
+            name: $localize`:mining.pool-dominance:Pool Dominance`,
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+        ],
+      },
+      yAxis: hashrate.length <= 1 ? undefined : [
         {
           min: (value) => {
             return value.min * 0.9;
@@ -214,21 +247,45 @@ export class PoolComponent implements OnInit {
             show: false,
           }
         },
-      ],
-      series: data.length <= 1 ? undefined : [
         {
-          zlevel: 0,
-          name: 'Hashrate',
+          type: 'value',
+          axisLabel: {
+            color: 'rgb(110, 112, 121)',
+            formatter: (val) => {
+              return `${val}%`
+            }
+          },
+          splitLine: {
+            show: false,
+          }
+        }
+      ],
+      series: hashrate.length <= 1 ? undefined : [
+        {
+          zlevel: 1,
+          name: $localize`:mining.hashrate:Hashrate`,
           showSymbol: false,
           symbol: 'none',
-          data: data,
+          data: hashrate,
           type: 'line',
           lineStyle: {
             width: 2,
           },
         },
+        {
+          zlevel: 0,
+          name: $localize`:mining.pool-dominance:Pool Dominance`,
+          showSymbol: false,
+          symbol: 'none',
+          data: share,
+          type: 'line',
+          yAxisIndex: 1,
+          lineStyle: {
+            width: 2,
+          },
+        }
       ],
-      dataZoom: data.length <= 1 ? undefined : [{
+      dataZoom: hashrate.length <= 1 ? undefined : [{
         type: 'inside',
         realtime: true,
         zoomLock: true,

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

@@ -74,8 +74,7 @@
                   <td class="td-width" i18n="transaction.audit">Audit</td>
                   <td *ngIf="pool" class="wrap-cell">
                     <ng-container *ngIf="auditStatus">
-                      <span *ngIf="auditStatus.coinbase; else accelerated" class="badge badge-primary mr-1" i18n="tx-features.tag.coinbase|Coinbase">Coinbase</span>
-                      <ng-template #accelerated><span *ngIf="auditStatus.accelerated || accelerationInfo || (tx && tx.acceleration) ; else expected" class="badge badge-accelerated mr-1" i18n="transaction.audit.accelerated">Accelerated</span></ng-template>
+                      <span *ngIf="auditStatus.coinbase; else expected" class="badge badge-primary mr-1" i18n="tx-features.tag.coinbase|Coinbase">Coinbase</span>
                       <ng-template #expected><span *ngIf="auditStatus.expected; else seen" class="badge badge-success mr-1" i18n-ngbTooltip="Expected in block tooltip" ngbTooltip="This transaction was projected to be included in the block" placement="bottom" i18n="tx-features.tag.expected|Expected in Block">Expected in Block</span></ng-template>
                       <ng-template #seen><span *ngIf="auditStatus.seen; else notSeen" class="badge badge-success mr-1" i18n-ngbTooltip="Seen in mempool tooltip" ngbTooltip="This transaction was seen in the mempool prior to mining" placement="bottom" i18n="tx-features.tag.seen|Seen in Mempool">Seen in Mempool</span></ng-template>
                       <ng-template #notSeen><span class="badge badge-warning mr-1" i18n-ngbTooltip="Not seen in mempool tooltip" ngbTooltip="This transaction was missing from our mempool prior to mining" placement="bottom" i18n="tx-features.tag.not-seen|Not seen in Mempool">Not seen in Mempool</span></ng-template>

frontend/src/app/docs/api-docs/api-docs.component.scss

@@ -269,7 +269,7 @@ h3 {
   .position-container {
     position: absolute;
     left: 50%;
-    bottom: 150px;
+    bottom: 158px;
   }
 
   #divider {

frontend/src/app/docs/code-template/code-template.component.html

@@ -33,7 +33,7 @@
     <li ngbNavItem *ngIf="code.codeTemplate.python && network !== 'liquid' && network !== 'liquidtestnet'" role="presentation">
       <a ngbNavLink (click)="adjustContainerHeight( $event )" role="tab">Python</a>
       <ng-template ngbNavContent>
-        <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapEsModule(code)"></app-clipboard></div>
+        <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapPythonTemplate(code)"></app-clipboard></div>
         <pre><code [innerText]="wrapPythonTemplate(code)"></code></pre>
       </ng-template>
     </li>

frontend/src/app/services/api.service.ts

@@ -228,8 +228,9 @@ export class ApiService {
     return this.httpClient.get<any>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/utxos/emergency-spent/stats');
   }
 
-  listFeaturedAssets$(): Observable<any[]> {
-    return this.httpClient.get<any[]>(this.apiBaseUrl + '/api/v1/assets/featured');
+  listFeaturedAssets$(network: string = 'liquid'): Observable<any[]> {
+    if (network === 'liquid') return this.httpClient.get<any[]>(this.apiBaseUrl + '/api/v1/assets/featured');
+    return of([]);
   }
 
   getAssetGroup$(id: string): Observable<any> {