Merge branch 'master' into cross-network-address-search

frontend/src/app/components/block-overview-graph/block-scene.ts

@@ -11,7 +11,7 @@ export default class BlockScene {
   getColor: ((tx: TxView) => Color) = defaultColorFunction;
   orientation: string;
   flip: boolean;
-  animationDuration: number = 1000;
+  animationDuration: number = 900;
   configAnimationOffset: number | null;
   animationOffset: number;
   highlightingEnabled: boolean;

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

@@ -59,7 +59,7 @@
                 <td [innerHTML]="'&lrm;' + (block.weight | wuBytes: 2)"></td>
               </tr>
               <tr *ngIf="auditAvailable">
-                <td><ng-container i18n="latest-blocks.health">Health</ng-container> <a class="info-link" [routerLink]="['/docs/faq' | relativeUrl ]" fragment="what-is-block-health"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></a></td>
+                <td><ng-container i18n="latest-blocks.health">Health</ng-container>&nbsp;<a class="info-link" [routerLink]="['/docs/faq' | relativeUrl ]" fragment="what-is-block-health"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></a></td>
                 <td>
                   <span
                     class="health-badge badge"

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

@@ -57,11 +57,6 @@
         text-align: left;
       }
     }
-    .info-link {
-      color: rgba(255, 255, 255, 0.4);
-      margin-left: 5px;
-    }
-
     .difference {
       margin-left: 0.5em;
   

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

@@ -3,8 +3,8 @@ import { Component, ComponentRef, ViewChild, HostListener, Input, Output, EventE
 import { StateService } from '../../services/state.service';
 import { MempoolBlockDelta, TransactionStripped } from '../../interfaces/websocket.interface';
 import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
-import { Subscription, BehaviorSubject, merge, of } from 'rxjs';
-import { switchMap, filter } from 'rxjs/operators';
+import { Subscription, BehaviorSubject, merge, of, timer } from 'rxjs';
+import { switchMap, filter, concatMap, map } from 'rxjs/operators';
 import { WebsocketService } from '../../services/websocket.service';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { Router } from '@angular/router';
@@ -33,7 +33,9 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
   poolDirection: string = 'left';
 
   blockSub: Subscription;
-  deltaSub: Subscription;
+  rateLimit = 1000;
+  private lastEventTime = Date.now() - this.rateLimit;
+  private subId = 0;
 
   firstLoad: boolean = true;
 
@@ -55,11 +57,39 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
 
   ngAfterViewInit(): void {
     this.blockSub = merge(
-        of(true),
-        this.stateService.connectionState$.pipe(filter((state) => state === 2))
-      )
-      .pipe(switchMap(() => this.stateService.mempoolBlockTransactions$))
-      .subscribe((transactionsStripped) => {
+      this.stateService.mempoolBlockTransactions$,
+      this.stateService.mempoolBlockDelta$,
+    ).pipe(
+      concatMap(update => {
+        const now = Date.now();
+        const timeSinceLastEvent = now - this.lastEventTime;
+        this.lastEventTime = Math.max(now, this.lastEventTime + this.rateLimit);
+
+        const subId = this.subId;
+
+        // If time since last event is less than X seconds, delay this event
+        if (timeSinceLastEvent < this.rateLimit) {
+          return timer(this.rateLimit - timeSinceLastEvent).pipe(
+            // Emit the event after the timer
+            map(() => ({ update, subId }))
+          );
+        } else {
+          // If enough time has passed, emit the event immediately
+          return of({ update, subId });
+        }
+      })
+    ).subscribe(({ update, subId }) => {
+      // discard stale updates after a block transition
+      if (subId !== this.subId) {
+        return;
+      }
+      // process update
+      if (update['added']) {
+        // delta
+        this.updateBlock(update as MempoolBlockDelta);
+      } else {
+        const transactionsStripped = update as TransactionStripped[];
+        // new transactions
         if (this.firstLoad) {
           this.replaceBlock(transactionsStripped);
         } else {
@@ -94,14 +124,13 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
             added
           });
         }
-      });
-    this.deltaSub = this.stateService.mempoolBlockDelta$.subscribe((delta) => {
-      this.updateBlock(delta);
+      }
     });
   }
 
   ngOnChanges(changes): void {
     if (changes.index) {
+      this.subId++;
       this.firstLoad = true;
       if (this.blockGraph) {
         this.blockGraph.clear(changes.index.currentValue > changes.index.previousValue ? this.chainDirection : this.poolDirection);
@@ -113,7 +142,6 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
 
   ngOnDestroy(): void {
     this.blockSub.unsubscribe();
-    this.deltaSub.unsubscribe();
     this.timeLtrSubscription.unsubscribe();
     this.websocketService.stopTrackMempoolBlock();
   }

frontend/src/app/components/mempool-block/mempool-block.component.ts

@@ -75,6 +75,7 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.stateService.markBlock$.next({});
+    this.websocketService.stopTrackMempoolBlock();
   }
 
   getOrdinal(mempoolBlock: MempoolBlock): string {

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

@@ -299,7 +299,11 @@
                 <td [innerHTML]="'&lrm;' + (tx.weight / 4 | vbytes: 2)"></td>
               </tr>
               <tr *ngIf="adjustedVsize != null">
-                <td i18n="transaction.adjusted-vsize|Transaction Adjusted VSize">Adjusted vsize</td>
+                <td i18n="transaction.adjusted-vsize|Transaction Adjusted VSize">Adjusted vsize
+                  <a class="info-link" [routerLink]="['/docs/faq/' | relativeUrl]" fragment="what-is-adjusted-vsize">
+                    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+                  </a>
+                </td>
                 <td [innerHTML]="'&lrm;' + (adjustedVsize | vbytes: 2)"></td>
               </tr>
               <tr>
@@ -321,7 +325,11 @@
                 <td [innerHTML]="'&lrm;' + (tx.locktime | number)"></td>
               </tr>
               <tr *ngIf="sigops != null">
-                <td i18n="transaction.sigops|Transaction Sigops">Sigops</td>
+                <td i18n="transaction.sigops|Transaction Sigops">Sigops
+                  <a class="info-link" [routerLink]="['/docs/faq/' | relativeUrl]" fragment="what-are-sigops">
+                    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+                  </a>
+                </td>
                 <td [innerHTML]="'&lrm;' + (sigops | number)"></td>
               </tr>
               <tr>

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

@@ -368,6 +368,28 @@
   </dl>
 </ng-template>
 
+<ng-template type="what-are-sigops">
+  <p>A "sigop" is a way of accounting for the cost of "signature operations" in Bitcoin script, like <code>OP_CHECKSIG</code>, <code>OP_CHECKSIGVERIFY</code>, <code>OP_CHECKMULTISIG</code> and <code>OP_CHECKMULTISIGVERIFY</code></p>
+  <p>These signature operations incur different costs depending on whether they are single or multi-sig operations, and on where they appear in a Bitcoin transaction.</p>
+  <p>By consensus, each Bitcoin block is permitted to include a maximum of 80,000 sigops.</p>
+</ng-template>
+
+<ng-template type="what-is-adjusted-vsize">
+  <p>Bitcoin blocks have two independent consensus-enforced resource constraints - a 4MWU weight limit, and the 80,000 sigop limit.</p>
+  <p>Most transactions use a more of the weight limit than the sigop limit. However, some transactions use a disproportionate number of sigops compared to their weight.</p>
+  <p>To account for this, Bitcoin Core calculates and uses an "adjusted vsize" equal 5 times the number of sigops, or the unadjusted vsize, whichever is larger.</p>
+  <p>Then, during block template construction, Bitcoin Core selects transactions in descending order of fee rate measured in satoshis per <i>adjusted vsize</i></p>
+  <p>On mempool.space, effective fee rates for unconfirmed transactions are also measured in terms of satoshis per adjusted vsize, after accounting for CPFP relationships and other dependencies.</p>
+</ng-template>
+
+<ng-template type="why-do-the-projected-block-fee-ranges-overlap">
+  <p>The projected mempool blocks represent what we expect the next blocks would look like if they were mined right now, and so each projected block follows all of the same rules and constraints as real mined blocks.</p>
+  <p>Those constraints can sometimes cause transactions with lower fee rates to be included "ahead" of transactions with higher rates.</p>
+  <p>For example, if one projected block has a very small amount of space left, it might be able to fit one more tiny low fee rate transaction, while larger higher fee rate transactions have to wait for the following block.</p>
+  <p>A similar effect can occur when there are a large number of transactions with very many sigops. In that scenario, each projected block can only include up to 80,000 sigops worth of transactions, after which the remaining space can only be filled by potentially much lower fee transactions with zero sigops.</p>
+  <p>In extreme cases this can produce several projected blocks in a row with overlapping fee ranges, as a result of each projected block containing both high-feerate high-sigop transactions and lower feerate zero-sigop transactions.</p>
+</ng-template>
+
 <ng-template type="who-runs-this-website">
   The official mempool.space website is operated by The Mempool Open Source Project. See more information on our <a [routerLink]="['/about']">About page</a>. There are also many unofficial instances of this website operated by individual members of the Bitcoin community.
 </ng-template>

frontend/src/app/liquid/liquid-master-page.module.ts

@@ -10,6 +10,7 @@ import { PushTransactionComponent } from '../components/push-transaction/push-tr
 import { BlocksList } from '../components/blocks-list/blocks-list.component';
 import { AssetGroupComponent } from '../components/assets/asset-group/asset-group.component';
 import { AssetsComponent } from '../components/assets/assets.component';
+import { AssetsFeaturedComponent } from '../components/assets/assets-featured/assets-featured.component'
 import { AssetComponent } from '../components/asset/asset.component';
 import { AssetsNavComponent } from '../components/assets/assets-nav/assets-nav.component';
 
@@ -73,6 +74,11 @@ const routes: Routes = [
             data: { networks: ['liquid'] },
             component: AssetsComponent,
           },
+          {
+            path: 'featured',
+            data: { networks: ['liquid'] },
+            component: AssetsFeaturedComponent,
+          },
           {
             path: 'asset/:id',
             data: { networkSpecific: true },

frontend/src/styles.scss

@@ -1191,3 +1191,7 @@ app-global-footer {
   line-height: 0.5;
   border-radius: 0.2rem;
 }
+
+.info-link fa-icon {
+  color: rgba(255, 255, 255, 0.4);
+}