Merge branch 'master' into nymkappa/tx-overflow

frontend/mempool-frontend-config.sample.json

@@ -22,5 +22,6 @@
   "TESTNET_BLOCK_AUDIT_START_HEIGHT": 0,
   "SIGNET_BLOCK_AUDIT_START_HEIGHT": 0,
   "LIGHTNING": false,
-  "HISTORICAL_PRICE": true
+  "HISTORICAL_PRICE": true,
+  "ACCELERATOR": false
 }

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

@@ -31,6 +31,14 @@
     <track label="Português" kind="captions" srclang="pt" src="/resources/promo-video/pt.vtt" [attr.default]="showSubtitles('pt') ? '' : null">
   </video>
 
+  <ng-container *ngIf="false && officialMempoolSpace">
+    <h3 class="mt-5">Sponsor the project</h3>
+    <div class="d-flex justify-content-center" style="max-width: 90%; margin: 35px auto 75px auto; column-gap: 15px">
+      <a href="/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button">Community</a>
+      <a href="/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button">Enterprise</a>
+    </div>
+  </ng-container>
+
   <div class="enterprise-sponsor" id="enterprise-sponsors">
     <h3 i18n="about.sponsors.enterprise.withRocket">Enterprise Sponsors 🚀</h3>
     <div class="wrapper">
@@ -191,16 +199,41 @@
     </div>
   </div>
 
-  <div class="community-sponsor" id="community-sponsors">
-    <h3 i18n="about.sponsors.withHeart">Community Sponsors ❤️</h3>
+  <ng-container *ngIf="officialMempoolSpace">
+    <div *ngIf="profiles$ | async as profiles" id="community-sponsors">
+      <div class="community-sponsor" style="margin-bottom: 68px" *ngIf="profiles.whales.length > 0">
+        <h3 i18n="about.sponsors.withHeart">Whale Sponsors</h3>
+        <div class="wrapper">
+          <ng-container>
+            <ng-template ngFor let-sponsor [ngForOf]="profiles.whales">
+              <a [href]="'https://twitter.com/' + sponsor.username" target="_blank" rel="sponsored" [title]="sponsor.username">
+                <img class="image" [src]="'data:' + sponsor.image_mime + ';base64,' + sponsor.image" onError="this.src = '/resources/profile/unknown.svg'; this.className = 'image unknown'"/>
+              </a>
+            </ng-template>
+          </ng-container>
+        </div>
+      </div>
 
+      <div class="community-sponsor" style="margin-bottom: 68px" *ngIf="profiles.chads.length > 0">
+        <h3 i18n="about.sponsors.withHeart">Chad Sponsors</h3>
+        <div class="wrapper">
+          <ng-template ngFor let-sponsor [ngForOf]="profiles.chads">
+            <a [href]="'https://twitter.com/' + sponsor.username" target="_blank" rel="sponsored" [title]="sponsor.username">
+              <img class="image" [src]="'data:' + sponsor.image_mime + ';base64,' + sponsor.image" onError="this.src = '/resources/profile/unknown.svg'; this.className = 'image unknown'"/>
+            </a>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <div class="community-sponsor" style="margin-bottom: 68px">
+    <h3 i18n="about.sponsors.withHeart">OG Sponsors ❤️</h3>
     <div class="wrapper">
-      <ng-container *ngIf="sponsors$ | async as sponsors; else loadingSponsors">
-        <ng-template ngFor let-sponsor [ngForOf]="sponsors">
-          <a [href]="'https://twitter.com/' + sponsor.handle" target="_blank" rel="sponsored" [title]="sponsor.handle">
-            <img class="image" [src]="'/api/v1/donations/images/' + sponsor.handle" />
-          </a>
-        </ng-template>
+      <ng-container *ngIf="ogs$ | async as ogs; else loadingSponsors">
+        <a *ngFor="let ogSponsor of ogs" [href]="'https://twitter.com/' + ogSponsor.handle" target="_blank" rel="sponsored" [title]="ogSponsor.handle">
+          <img class="image" [src]="'/api/v1/donations/images/' + ogSponsor.handle" onError="this.src = '/resources/profile/unknown.svg'; this.className = 'image unknown'"/>
+        </a>
       </ng-container>
     </div>
   </div>
@@ -340,7 +373,7 @@
       <div class="wrapper">
         <ng-template ngFor let-translator [ngForOf]="translators">
           <a [href]="'https://twitter.com/' + translator.value" target="_blank" [title]="translator.key">
-            <img class="image" [src]="'/api/v1/translators/images/' + translator.value" />
+            <img class="image" [src]="'/api/v1/translators/images/' + translator.value" onError="this.src = '/resources/profile/unknown.svg'; this.className = 'image unknown'"/>
           </a>
         </ng-template>
       </div>
@@ -354,7 +387,7 @@
       <div class="wrapper">
         <ng-template ngFor let-contributor [ngForOf]="contributors.regular">
           <a [href]="'https://github.com/' + contributor.name" target="_blank" [title]="contributor.name">
-            <img class="image" [src]="'/api/v1/contributors/images/' + contributor.id" />
+            <img class="image" [src]="'/api/v1/contributors/images/' + contributor.id" onError="this.src = '/resources/profile/unknown.svg'; this.className = 'image unknown'"/>
             <span>{{ contributor.name }}</span>
           </a>
         </ng-template>
@@ -366,7 +399,7 @@
       <div class="wrapper">
         <ng-template ngFor let-contributor [ngForOf]="contributors.core">
           <a [href]="'https://github.com/' + contributor.name" target="_blank" [title]="contributor.name">
-            <img class="image" [src]="'/api/v1/contributors/images/' + contributor.id" />
+            <img class="image" [src]="'/api/v1/contributors/images/' + contributor.id" onError="this.src = '/resources/profile/unknown.svg'; this.className = 'image unknown'"/>
             <span>{{ contributor.name }}</span>
           </a>
         </ng-template>

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

@@ -10,6 +10,9 @@
     margin: 25px;
     line-height: 32px;
   }
+  .unknown {
+    border: 1px solid #b4b4b4;
+  }
 
   .image.not-rounded {
     border-radius: 0;

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

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 import { ApiService } from '../../services/api.service';
 import { IBackendInfo } from '../../interfaces/websocket.interface';
 import { Router, ActivatedRoute } from '@angular/router';
-import { map, tap } from 'rxjs/operators';
+import { map, share, tap } from 'rxjs/operators';
 import { ITranslators } from '../../interfaces/node-api.interface';
 import { DOCUMENT } from '@angular/common';
 
@@ -19,14 +19,16 @@ import { DOCUMENT } from '@angular/common';
 export class AboutComponent implements OnInit {
   @ViewChild('promoVideo') promoVideo: ElementRef;
   backendInfo$: Observable<IBackendInfo>;
-  sponsors$: Observable<any>;
-  translators$: Observable<ITranslators>;
-  allContributors$: Observable<any>;
   frontendGitCommitHash = this.stateService.env.GIT_COMMIT_HASH;
   packetJsonVersion = this.stateService.env.PACKAGE_JSON_VERSION;
   officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
   showNavigateToSponsor = false;
 
+  profiles$: Observable<any>;
+  translators$: Observable<ITranslators>;
+  allContributors$: Observable<any>;
+  ogs$: Observable<any>;
+
   constructor(
     private websocketService: WebsocketService,
     private seoService: SeoService,
@@ -43,10 +45,13 @@ export class AboutComponent implements OnInit {
     this.seoService.setTitle($localize`:@@004b222ff9ef9dd4771b777950ca1d0e4cd4348a:About`);
     this.websocketService.want(['blocks']);
 
-    this.sponsors$ = this.apiService.getDonation$()
-      .pipe(
-        tap(() => this.goToAnchor())
-      );
+    this.profiles$ = this.apiService.getAboutPageProfiles$().pipe(
+      tap(() => {
+        this.goToAnchor()
+      }),
+      share(),
+    )
+
     this.translators$ = this.apiService.getTranslators$()
       .pipe(
         map((translators) => {
@@ -59,6 +64,9 @@ export class AboutComponent implements OnInit {
         }),
         tap(() => this.goToAnchor())
       );
+
+    this.ogs$ = this.apiService.getOgs$();
+
     this.allContributors$ = this.apiService.getContributor$().pipe(
       map((contributors) => {
         return {

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

@@ -147,7 +147,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     }
   }
 
-  update(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
+  update(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
     if (this.scene) {
       this.scene.update(add, remove, change, direction, resetLayout);
       this.start();

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

@@ -150,7 +150,7 @@ export default class BlockScene {
     this.updateAll(startTime, 200, direction);
   }
 
-  update(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
+  update(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
     const startTime = performance.now();
     const removed = this.removeBatch(remove, startTime, direction);
 
@@ -175,6 +175,7 @@ export default class BlockScene {
       // update effective rates
       change.forEach(tx => {
         if (this.txs[tx.txid]) {
+          this.txs[tx.txid].acc = tx.acc;
           this.txs[tx.txid].feerate = tx.rate || (this.txs[tx.txid].fee / this.txs[tx.txid].vsize);
           this.txs[tx.txid].rate = tx.rate;
           this.txs[tx.txid].dirty = true;

frontend/src/app/components/block-overview-graph/tx-view.ts

@@ -17,6 +17,7 @@ const auditColors = {
   missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
   added: hexToColor('0099ff'),
   selected: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7),
+  accelerated: hexToColor('8F5FF6'),
 };
 
 // convert from this class's update format to TxSprite's update format
@@ -37,8 +38,9 @@ export default class TxView implements TransactionStripped {
   vsize: number;
   value: number;
   feerate: number;
+  acc?: boolean;
   rate?: number;
-  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'rbf';
+  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'rbf' | 'accelerated';
   context?: 'projected' | 'actual';
   scene?: BlockScene;
 
@@ -63,6 +65,7 @@ export default class TxView implements TransactionStripped {
     this.vsize = tx.vsize;
     this.value = tx.value;
     this.feerate = tx.rate || (tx.fee / tx.vsize); // sort by effective fee rate where available
+    this.acc = tx.acc;
     this.rate = tx.rate;
     this.status = tx.status;
     this.initialised = false;
@@ -199,6 +202,11 @@ export default class TxView implements TransactionStripped {
     const feeLevelColor = feeColors[feeLevelIndex] || feeColors[mempoolFeeColors.length - 1];
     // Normal mode
     if (!this.scene?.highlightingEnabled) {
+      if (this.acc) {
+        return auditColors.accelerated;
+      } else {
+        return feeLevelColor;
+      }
       return feeLevelColor;
     }
     // Block audit
@@ -216,6 +224,8 @@ export default class TxView implements TransactionStripped {
         return auditColors.added;
       case 'selected':
         return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+      case 'accelerated':
+        return auditColors.accelerated;
       case 'found':
         if (this.context === 'projected') {
           return auditFeeColors[feeLevelIndex] || auditFeeColors[mempoolFeeColors.length - 1];
@@ -223,7 +233,11 @@ export default class TxView implements TransactionStripped {
           return feeLevelColor;
         }
       default:
-        return feeLevelColor;
+        if (this.acc) {
+          return auditColors.accelerated;
+        } else {
+          return feeLevelColor;
+        }
     }
   }
 }

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

@@ -29,7 +29,8 @@
         </td>
       </tr>
       <tr *ngIf="effectiveRate && effectiveRate !== feeRate">
-        <td class="td-width" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
+        <td *ngIf="!this.acceleration" class="td-width" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
+        <td *ngIf="this.acceleration" class="td-width" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Accelerated fee rate</td>
         <td>
           <app-fee-rate [fee]="effectiveRate"></app-fee-rate>
         </td>
@@ -54,6 +55,7 @@
           <td *ngSwitchCase="'added'"><span class="badge badge-warning" i18n="transaction.audit.added">Added</span></td>
           <td *ngSwitchCase="'selected'"><span class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span></td>
           <td *ngSwitchCase="'rbf'"><span class="badge badge-warning" i18n="transaction.audit.conflicting">Conflicting</span></td>
+          <td *ngSwitchCase="'accelerated'"><span class="badge badge-success" i18n="transaction.audit.accelerated">Accelerated</span></td>
         </ng-container>
       </tr>
     </tbody>

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

@@ -21,6 +21,7 @@ export class BlockOverviewTooltipComponent implements OnChanges {
   vsize = 1;
   feeRate = 0;
   effectiveRate;
+  acceleration;
 
   tooltipPosition: Position = { x: 0, y: 0 };
 
@@ -53,6 +54,7 @@ export class BlockOverviewTooltipComponent implements OnChanges {
       this.vsize = tx.vsize || 1;
       this.feeRate = this.fee / this.vsize;
       this.effectiveRate = tx.rate;
+      this.acceleration = tx.acc;
     }
   }
 }

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

@@ -340,12 +340,16 @@ export class BlockComponent implements OnInit, OnDestroy {
         const isFresh = {};
         const isSigop = {};
         const isRbf = {};
+        const isAccelerated = {};
         this.numMissing = 0;
         this.numUnexpected = 0;
 
         if (blockAudit?.template) {
           for (const tx of blockAudit.template) {
             inTemplate[tx.txid] = true;
+            if (tx.acc) {
+              isAccelerated[tx.txid] = true;
+            }
           }
           for (const tx of transactions) {
             inBlock[tx.txid] = true;
@@ -365,6 +369,9 @@ export class BlockComponent implements OnInit, OnDestroy {
           for (const txid of blockAudit.fullrbfTxs || []) {
             isRbf[txid] = true;
           }
+          for (const txid of blockAudit.acceleratedTxs || []) {
+            isAccelerated[txid] = true;
+          }
           // set transaction statuses
           for (const tx of blockAudit.template) {
             tx.context = 'projected';
@@ -389,6 +396,9 @@ export class BlockComponent implements OnInit, OnDestroy {
               isMissing[tx.txid] = true;
               this.numMissing++;
             }
+            if (isAccelerated[tx.txid]) {
+              tx.status = 'accelerated';
+            }
           }
           for (const [index, tx] of transactions.entries()) {
             tx.context = 'actual';
@@ -405,6 +415,9 @@ export class BlockComponent implements OnInit, OnDestroy {
               isSelected[tx.txid] = true;
               this.numUnexpected++;
             }
+            if (isAccelerated[tx.txid]) {
+              tx.status = 'accelerated';
+            }
           }
           for (const tx of transactions) {
             inBlock[tx.txid] = true;

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

@@ -4,38 +4,56 @@
   class="difficulty-tooltip"
   [style.visibility]="status ? 'visible' : 'hidden'"
   [style.left]="tooltipPosition.x + 'px'"
-  [style.top]="tooltipPosition.y + 'px'"
+  [style.top]="tooltipPosition.y + (isMobile ? -60 : 0) + 'px'"
 >
-<ng-container [ngSwitch]="status">
+<ng-container *ngIf="!isMobile" [ngSwitch]="status">
   <ng-container *ngSwitchCase="'mined'">
     <ng-container *ngIf="isAhead">
-      <ng-container *ngTemplateOutlet="expected === 1 ? blocksSingular : blocksPlural; context: {$implicit: expected }"></ng-container>
-      <ng-template #blocksPlural let-i i18n="difficulty-box.expected-blocks">{{ i }} blocks expected</ng-template>
-      <ng-template #blocksSingular let-i i18n="difficulty-box.expected-block">{{ i }} block expected</ng-template>
+      <ng-container *ngTemplateOutlet="expected === 1 ? expectedMinedBlocksSingular : expectedMinedBlocksPlural; context: {$implicit: expected }"></ng-container>
     </ng-container>
     <ng-container *ngIf="!isAhead">
-      <ng-container *ngTemplateOutlet="mined === 1 ? blocksSingular : blocksPlural; context: {$implicit: mined }"></ng-container>
-      <ng-template #blocksPlural let-i i18n="difficulty-box.mined-blocks">{{ i }} blocks mined</ng-template>
-      <ng-template #blocksSingular let-i i18n="difficulty-box.mined-block">{{ i }} block mined</ng-template>
+      <ng-container *ngTemplateOutlet="mined === 1 ? minedBlocksSingular : minedBlocksPlural; context: {$implicit: mined }"></ng-container>
     </ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="'remaining'">
-    <ng-container *ngTemplateOutlet="remaining === 1 ? blocksSingular : blocksPlural; context: {$implicit: remaining }"></ng-container>
-    <ng-template #blocksPlural let-i i18n="difficulty-box.remaining-blocks">{{ i }} blocks remaining</ng-template>
-    <ng-template #blocksSingular let-i i18n="difficulty-box.remaining-block">{{ i }} block remaining</ng-template>
+    <ng-container *ngTemplateOutlet="remaining === 1 ? remainingBlocksSingular : remainingBlocksPlural; context: {$implicit: remaining }"></ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="'ahead'">
-    <ng-container *ngTemplateOutlet="ahead === 1 ? blocksSingular : blocksPlural; context: {$implicit: ahead }"></ng-container>
-    <ng-template #blocksPlural let-i i18n="difficulty-box.blocks-ahead">{{ i }} blocks ahead</ng-template>
-    <ng-template #blocksSingular let-i i18n="difficulty-box.block-ahead">{{ i }} block ahead</ng-template>
+    <ng-container *ngTemplateOutlet="ahead === 1 ? aheadBlocksSingular : aheadBlocksPlural; context: {$implicit: ahead }"></ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="'behind'">
-    <ng-container *ngTemplateOutlet="behind === 1 ? blocksSingular : blocksPlural; context: {$implicit: behind }"></ng-container>
-    <ng-template #blocksPlural let-i i18n="difficulty-box.blocks-behind">{{ i }} blocks behind</ng-template>
-    <ng-template #blocksSingular let-i i18n="difficulty-box.block-behind">{{ i }} block behind</ng-template>
+    <ng-container *ngTemplateOutlet="behind === 1 ? behindBlocksSingular : behindBlocksPlural; context: {$implicit: behind }"></ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="'next'">
     <span class="next-block" i18n="@@bdf0e930eb22431140a2eaeacd809cc5f8ebd38c">Next Block</span>
   </ng-container>
 </ng-container>
-</div>
+<ng-container *ngIf="isMobile">
+  <ng-container *ngIf="isAhead">
+    <ng-container *ngTemplateOutlet="expected === 1 ? minedBlocksSingular : minedBlocksPlural; context: {$implicit: expected }"></ng-container>
+  </ng-container>
+  <ng-container *ngIf="!isAhead">
+    <ng-container *ngTemplateOutlet="mined === 1 ? minedBlocksSingular : minedBlocksPlural; context: {$implicit: mined }"></ng-container>
+  </ng-container>
+  <br>
+  <ng-container *ngTemplateOutlet="remaining === 1 ? remainingBlocksSingular : remainingBlocksPlural; context: {$implicit: remaining }"></ng-container>
+  <br>
+  <ng-container *ngIf="ahead > 0">
+    <ng-container *ngTemplateOutlet="ahead === 1 ? aheadBlocksSingular : aheadBlocksPlural; context: {$implicit: ahead }"></ng-container>
+  </ng-container>
+  <ng-container *ngIf="behind > 0">
+    <ng-container *ngTemplateOutlet="behind === 1 ? behindBlocksSingular : behindBlocksPlural; context: {$implicit: behind }"></ng-container>
+  </ng-container>
+</ng-container>
+</div>
+
+<ng-template #expectedMinedBlocksPlural let-i i18n="difficulty-box.expected-blocks">{{ i }} blocks expected</ng-template>
+<ng-template #expectedMinedBlocksSingular let-i i18n="difficulty-box.expected-block">{{ i }} block expected</ng-template>
+<ng-template #minedBlocksPlural let-i i18n="difficulty-box.mined-blocks">{{ i }} blocks mined</ng-template>
+<ng-template #minedBlocksSingular let-i i18n="difficulty-box.mined-block">{{ i }} block mined</ng-template>
+<ng-template #remainingBlocksPlural let-i i18n="difficulty-box.remaining-blocks">{{ i }} blocks remaining</ng-template>
+<ng-template #remainingBlocksSingular let-i i18n="difficulty-box.remaining-block">{{ i }} block remaining</ng-template>
+<ng-template #aheadBlocksPlural let-i i18n="difficulty-box.blocks-ahead">{{ i }} blocks ahead</ng-template>
+<ng-template #aheadBlocksSingular let-i i18n="difficulty-box.block-ahead">{{ i }} block ahead</ng-template>
+<ng-template #behindBlocksPlural let-i i18n="difficulty-box.blocks-behind">{{ i }} blocks behind</ng-template>
+<ng-template #behindBlocksSingular let-i i18n="difficulty-box.block-behind">{{ i }} block behind</ng-template>

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild, Input, OnChanges } from '@angular/core';
+import { Component, ElementRef, ViewChild, Input, OnChanges, HostListener } from '@angular/core';
 
 interface EpochProgress {
   base: string;
@@ -35,12 +35,15 @@ export class DifficultyTooltipComponent implements OnChanges {
   remaining: number;
   isAhead: boolean;
   isBehind: boolean;
+  isMobile: boolean;
 
   tooltipPosition = { x: 0, y: 0 };
 
   @ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
 
-  constructor() {}
+  constructor() {
+    this.onResize();
+  }
 
   ngOnChanges(changes): void {
     if (changes.cursorPosition && changes.cursorPosition.currentValue) {
@@ -63,4 +66,9 @@ export class DifficultyTooltipComponent implements OnChanges {
       this.isBehind = this.behind > 0;
     }
   }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    this.isMobile = window.innerWidth <= 767.98;
+  }
 }

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 224 9" shape-rendering="crispEdges" preserveAspectRatio="none">
+          <svg #epochSvg 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" />
@@ -22,7 +22,7 @@
               class="rect {{rect.status}}"
               [class.hover]="hoverSection && rect.status === hoverSection.status"
               (pointerover)="onHover($event, rect);"
-              (pointerout)="onBlur($event);"
+              (pointerout)="onBlur();"
             >
               <animate
                 *ngIf="rect.status === 'next'"

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

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
-import { combineLatest, Observable, timer } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, ElementRef, ViewChild, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { StateService } from '../..//services/state.service';
 
 interface EpochProgress {
@@ -44,6 +44,8 @@ export class DifficultyComponent implements OnInit {
   @Input() showProgress = true;
   @Input() showHalving = false;
   @Input() showTitle = true;
+
+  @ViewChild('epochSvg') epochSvgElement: ElementRef<SVGElement>;
  
   isLoadingWebSocket$: Observable<boolean>;
   difficultyEpoch$: Observable<EpochProgress>;
@@ -191,21 +193,26 @@ export class DifficultyComponent implements OnInit {
   }
 
   @HostListener('pointerdown', ['$event'])
-  onPointerDown(event) {
-    this.onPointerMove(event);
+  onPointerDown(event): void {
+    if (this.epochSvgElement.nativeElement?.contains(event.target)) {
+      this.onPointerMove(event);
+      event.preventDefault();
+    }
   }
 
   @HostListener('pointermove', ['$event'])
-  onPointerMove(event) {
-    this.tooltipPosition = { x: event.clientX, y: event.clientY };
-    this.cd.markForCheck();
+  onPointerMove(event): void {
+    if (this.epochSvgElement.nativeElement?.contains(event.target)) {
+      this.tooltipPosition = { x: event.clientX, y: event.clientY };
+      this.cd.markForCheck();
+    }
   }
 
-  onHover(event, rect): void {
+  onHover(_, rect): void {
     this.hoverSection = rect;
   }
 
-  onBlur(event): void {
+  onBlur(): void {
     this.hoverSection = null;
   }
 }

frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts

@@ -64,7 +64,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
       return;
     }
     const samples = [];
-    const txs = this.transactions.map(tx => { return { vsize: tx.vsize, rate: tx.rate || (tx.fee / tx.vsize) }; }).sort((a, b) => { return b.rate - a.rate; });
+    const txs = this.transactions.filter(tx => !tx.acc).map(tx => { return { vsize: tx.vsize, rate: tx.rate || (tx.fee / tx.vsize) }; }).sort((a, b) => { return b.rate - a.rate; });
     const maxBlockVSize = this.stateService.env.BLOCK_WEIGHT_UNITS / 4;
     const sampleInterval = maxBlockVSize / this.numSamples;
     let cumVSize = 0;

frontend/src/app/components/master-page/master-page.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
-<header>
+<header *ngIf="headerVisible">
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
   <ng-template [ngIf]="subdomain">

frontend/src/app/components/master-page/master-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { LanguageService } from '../../services/language.service';
@@ -11,6 +11,9 @@ import { NavigationService } from '../../services/navigation.service';
   styleUrls: ['./master-page.component.scss'],
 })
 export class MasterPageComponent implements OnInit {
+  @Input() headerVisible = true;
+  @Input() footerVisibleOverride: boolean | null = null;
+
   env: Env;
   network$: Observable<string>;
   connectionState$: Observable<number>;
@@ -38,10 +41,14 @@ export class MasterPageComponent implements OnInit {
     this.subdomain = this.enterpriseService.getSubdomain();
     this.navigationService.subnetPaths.subscribe((paths) => {
       this.networkPaths = paths;
-      if (paths.mainnet.indexOf('docs') > -1) {
-        this.footerVisible = false;
+      if (this.footerVisibleOverride === null) {
+        if (paths.mainnet.indexOf('docs') > -1) {
+          this.footerVisible = false;
+        } else {
+          this.footerVisible = true;
+        }
       } else {
-        this.footerVisible = true;
+        this.footerVisible = this.footerVisibleOverride;
       }
     });
   }

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

@@ -94,7 +94,6 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
 
   updateBlock(delta: MempoolBlockDelta): void {
     const blockMined = (this.stateService.latestBlockHeight > this.lastBlockHeight);
-
     if (this.blockIndex !== this.index) {
       const direction = (this.blockIndex == null || this.index < this.blockIndex) ? this.poolDirection : this.chainDirection;
       this.blockGraph.replace(delta.added, direction);

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -49,7 +49,7 @@
         </div>
       </ng-template>
     </div>
-    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
+    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
   </div>
 </ng-container>
 

frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss

@@ -169,4 +169,34 @@
   transform: translate(calc(-0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
   border-radius: 2px;
   z-index: -1;
+}
+
+.blink{
+  width:400px;
+  height:400px;
+  border-bottom: 35px solid #FFF;
+  animation: blink 0.2s infinite;
+}
+@keyframes blink{
+  0% {
+    border-bottom: 35px solid green;
+  }
+  50% {
+    border-bottom: 35px solid yellow;
+  }
+  100% {
+    border-bottom: 35px solid orange;
+  }
+}
+
+@-webkit-keyframes blink{
+  0% {
+    border-bottom: 35px solid green;
+  }
+  50% {
+    border-bottom: 35px solid yellow;
+  }
+  100% {
+    border-bottom: 35px solid orange;
+  }
 }

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

@@ -26,6 +26,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
 export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   @Input() minimal: boolean = false;
   @Input() blockWidth: number = 125;
+  @Input() containerWidth: number = null;
   @Input() count: number = null;
   @Input() spotlight: number = 0;
   @Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`;

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

@@ -99,14 +99,20 @@
                     </ng-template>
                     <ng-template #estimationTmpl>
                       <ng-template [ngIf]="this.mempoolPosition.block >= 7" [ngIfElse]="belowBlockLimit">
-                        <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
+                        <span class="eta d-flex">
+                          <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
+                          <span class="ml-2"></span><a *ngIf="stateService.env.OFFICIAL_MEMPOOL_SPACE && stateService.env.ACCELERATOR" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn badge badge-primary accelerate ml-auto" i18n="transaction.accelerate|Accelerate button label">Accelerate</a>
+                        </span>
                       </ng-template>
                       <ng-template #belowBlockLimit>
                         <ng-template [ngIf]="network === 'liquid' || network === 'liquidtestnet'" [ngIfElse]="timeEstimateDefault">
                           <app-time kind="until" [time]="(60 * 1000 * this.mempoolPosition.block) + now" [fastRender]="false" [fixedRender]="true"></app-time>
                         </ng-template>
                         <ng-template #timeEstimateDefault>
-                          <app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.timeAvg * (this.mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
+                          <span class="d-flex">
+                            <app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.timeAvg * (this.mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
+                            <span class="ml-2"></span><a *ngIf="stateService.env.OFFICIAL_MEMPOOL_SPACE && stateService.env.ACCELERATOR" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn badge badge-primary accelerate ml-auto" i18n="transaction.accelerate|Accelerate button label">Accelerate</a>
+                          </span>
                         </ng-template>
                       </ng-template>
                     </ng-template>
@@ -488,7 +494,8 @@
         </td>
       </tr>
       <tr *ngIf="cpfpInfo && hasEffectiveFeeRate">
-        <td i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
+        <td *ngIf="tx.acceleration" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
+        <td *ngIf="!tx.acceleration" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
         <td>
           <div class="effective-fee-container">
             <app-fee-rate [fee]="tx.effectiveFeePerVsize"></app-fee-rate>

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

@@ -216,4 +216,23 @@
   .alert-link {
     display: block;
   }
+}
+
+.eta {
+  display: flex;
+  justify-content: end;
+  flex-wrap: wrap;
+  align-content: center;
+  @media (min-width: 850px) {
+    justify-content: space-between;
+  }
+}
+
+.accelerate {
+  align-self: auto;
+  margin-top: 3px;
+  @media (min-width: 850px) {
+    justify-self: start;
+    margin-left: 0px;
+  }
 }

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

@@ -97,7 +97,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     private router: Router,
     private relativeUrlPipe: RelativeUrlPipe,
     private electrsApiService: ElectrsApiService,
-    private stateService: StateService,
+    public stateService: StateService,
     private cacheService: CacheService,
     private websocketService: WebsocketService,
     private audioService: AudioService,
@@ -183,6 +183,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         } else {
           this.tx.effectiveFeePerVsize = cpfpInfo.effectiveFeePerVsize;
         }
+        if (cpfpInfo.acceleration) {
+          this.tx.acceleration = cpfpInfo.acceleration;
+        }
 
         this.cpfpInfo = cpfpInfo;
         this.hasEffectiveFeeRate = hasRelatives || (this.tx.effectiveFeePerVsize && (Math.abs(this.tx.effectiveFeePerVsize - this.tx.feePerVsize) > 0.01));

frontend/src/app/interfaces/electrs.interface.ts

@@ -19,6 +19,7 @@ export interface Transaction {
   ancestors?: Ancestor[];
   bestDescendant?: BestDescendant | null;
   cpfpChecked?: boolean;
+  acceleration?: number;
   deleteAfter?: number;
   _unblinded?: any;
   _deduced?: boolean;

frontend/src/app/interfaces/node-api.interface.ts

@@ -27,6 +27,7 @@ export interface CpfpInfo {
   effectiveFeePerVsize?: number;
   sigops?: number;
   adjustedVsize?: number;
+  acceleration?: number;
 }
 
 export interface RbfInfo {
@@ -111,6 +112,7 @@ export interface PoolInfo {
   addresses: string; // JSON array
   emptyBlocks: number;
   slug: string;
+  poolUniqueId: number;
 }
 export interface PoolStat {
   pool: PoolInfo;
@@ -159,6 +161,7 @@ export interface BlockAudit extends BlockExtended {
   freshTxs: string[],
   sigopTxs: string[],
   fullrbfTxs: string[],
+  acceleratedTxs: string[],
   matchRate: number,
   expectedFees: number,
   expectedWeight: number,
@@ -175,7 +178,8 @@ export interface TransactionStripped {
   vsize: number;
   value: number;
   rate?: number; // effective fee rate
-  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'rbf';
+  acc?: boolean;
+  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'rbf' | 'accelerated';
   context?: 'projected' | 'actual';
 }
 
@@ -187,6 +191,7 @@ export interface RbfTransaction extends TransactionStripped {
 export interface MempoolPosition {
   block: number,
   vsize: number,
+  accelerated?: boolean
 }
 
 export interface RewardStats {

frontend/src/app/interfaces/websocket.interface.ts

@@ -70,7 +70,7 @@ export interface MempoolBlockWithTransactions extends MempoolBlock {
 export interface MempoolBlockDelta {
   added: TransactionStripped[],
   removed: string[],
-  changed?: { txid: string, rate: number | undefined }[];
+  changed?: { txid: string, rate: number | undefined, acc: boolean | undefined }[];
 }
 
 export interface MempoolInfo {
@@ -88,8 +88,9 @@ export interface TransactionStripped {
   fee: number;
   vsize: number;
   value: number;
+  acc?: boolean; // is accelerated?
   rate?: number; // effective fee rate
-  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'rbf';
+  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'rbf' | 'accelerated';
   context?: 'projected' | 'actual';
 }
 

frontend/src/app/lightning/lightning.module.ts

@@ -34,6 +34,7 @@ import { OldestNodes } from '../lightning/nodes-ranking/oldest-nodes/oldest-node
 import { NodesRankingsDashboard } from '../lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component';
 import { NodeChannels } from '../lightning/nodes-channels/node-channels.component';
 import { GroupComponent } from './group/group.component';
+import { NodeOwnerComponent } from './node-owner/node-owner.component';
 
 @NgModule({
   declarations: [
@@ -66,6 +67,7 @@ import { GroupComponent } from './group/group.component';
     NodesRankingsDashboard,
     NodeChannels,
     GroupComponent,
+    NodeOwnerComponent,
   ],
   imports: [
     CommonModule,
@@ -103,6 +105,7 @@ import { GroupComponent } from './group/group.component';
     OldestNodes,
     NodesRankingsDashboard,
     NodeChannels,
+    NodeOwnerComponent,
   ],
   providers: [
     LightningApiService,

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

@@ -0,0 +1,17 @@
+<div *ngIf="stateService.env.OFFICIAL_MEMPOOL_SPACE === true">
+
+  <div *ngIf="{ value: (nodeOwner$ | async) } as nodeOwner">
+
+    <div *ngIf="nodeOwner.value && nodeOwner.value.sns_id">
+      <a target="_blank" [href]="'https://twitter.com/' + nodeOwner.value.username">
+        <img class="profile-photo" [src]="'data:' + nodeOwner.value.image_mime + ';base64,' + nodeOwner.value.image">
+      </a>
+    </div>
+
+    <div *ngIf="nodeOwner.value === false">
+      <a [href]="'/login/lnnode?type=signup&pubkey=' + publicKey + '&alias=' + alias" class="btn btn-primary btn-sm">Claim</a>
+    <div>
+
+  </div>
+
+</div>

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

@@ -0,0 +1,4 @@
+.profile-photo {
+  width: 31px;
+  height: 31px;
+}

frontend/src/app/lightning/node-owner/node-owner.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-node-owner',
+  templateUrl: './node-owner.component.html',
+  styleUrls: ['./node-owner.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodeOwnerComponent{
+  @Input() publicKey: string = '';
+  @Input() alias: string = '';
+  @Input() nodeOwner$: Observable<any>;
+
+  constructor(
+    public stateService: StateService
+  ) {
+  }
+}

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

@@ -3,13 +3,17 @@
   <ng-container *ngIf="!error">
     <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
     <div class="title-container mb-2">
-      <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
-      <span class="tx-link">
+      <div class="d-flex justify-content-between align-items-center">
+        <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
+        <!-- <app-node-owner [nodeOwner$]="nodeOwner$" [publicKey]="node.public_key" [alias]="node.alias" class="claim-btn"></app-node-owner> -->
+      </div>
+      <span class="tx-link justify-content-between align-items-center">
         <span class="node-id">
           <app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
             <app-clipboard [text]="node.public_key"></app-clipboard>
           </app-truncate>
         </span>
+        <!-- <app-node-owner [nodeOwner$]="nodeOwner$" [publicKey]="node.public_key" [alias]="node.alias" class="claim-btn-mobile"></app-node-owner> -->
       </span>
     </div>
   </ng-container>

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

@@ -111,3 +111,17 @@ app-fiat {
   margin: 0 0.25em;
   color: slategrey;
 }
+
+.claim-btn {
+  max-height: 32px;
+  @media (min-width: 850px) {
+    display: none;
+  }
+}
+
+.claim-btn-mobile {
+  max-height: 32px;
+  @media (max-width: 850px) {
+    display: none;
+  }
+}

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

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Observable } from 'rxjs';
-import { catchError, map, switchMap, tap } from 'rxjs/operators';
+import { Observable, of, EMPTY } from 'rxjs';
+import { catchError, map, switchMap, tap, share } from 'rxjs/operators';
 import { SeoService } from '../../services/seo.service';
 import { ApiService } from '../../services/api.service';
 import { LightningApiService } from '../lightning-api.service';
@@ -38,6 +38,7 @@ export class NodeComponent implements OnInit {
   tlvRecords: CustomRecord[];
   avgChannelDistance$: Observable<number | null>;
   showFeatures = false;
+  nodeOwner$: Observable<any>;
   kmToMiles = kmToMiles;
 
   constructor(
@@ -45,6 +46,7 @@ export class NodeComponent implements OnInit {
     private lightningApiService: LightningApiService,
     private activatedRoute: ActivatedRoute,
     private seoService: SeoService,
+    private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
@@ -147,6 +149,24 @@ export class NodeComponent implements OnInit {
         return null;
       })
     ) as Observable<number | null>;
+
+    this.nodeOwner$ = this.activatedRoute.paramMap
+      .pipe(
+        switchMap((params: ParamMap) => {
+          return this.apiService.getNodeOwner$(params.get('public_key')).pipe(
+            switchMap((response) =>  {
+              if (response.status === 204) {
+                return of(false);
+              }
+              return of(response.body);
+            }),
+            catchError(() => {
+              return of(false);
+            })
+          )
+        }),
+        share(),
+      );
   }
 
   toggleShowDetails(): void {

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

@@ -8,6 +8,8 @@ import { WebsocketResponse } from '../interfaces/websocket.interface';
 import { Outspend, Transaction } from '../interfaces/electrs.interface';
 import { Conversion } from './price.service';
 
+const SERVICES_API_PREFIX = `/api/v1/services`;
+
 @Injectable({
   providedIn: 'root'
 })
@@ -92,15 +94,11 @@ export class ApiService {
     return this.httpClient.get<Outspend[][]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/outspends', { params });
   }
 
-  requestDonation$(amount: number, orderId: string): Observable<any> {
-    const params = {
-      amount: amount,
-      orderId: orderId,
-    };
-    return this.httpClient.post<any>(this.apiBaseUrl + '/api/v1/donations', params);
+  getAboutPageProfiles$(): Observable<any[]> {
+    return this.httpClient.get<any[]>(this.apiBaseUrl + '/api/v1/about-page');
   }
 
-  getDonation$(): Observable<any[]> {
+  getOgs$(): Observable<any> {
     return this.httpClient.get<any[]>(this.apiBaseUrl + '/api/v1/donations');
   }
 
@@ -112,10 +110,6 @@ export class ApiService {
     return this.httpClient.get<any[]>(this.apiBaseUrl + '/api/v1/contributors');
   }
 
-  checkDonation$(orderId: string): Observable<any[]> {
-    return this.httpClient.get<any[]>(this.apiBaseUrl + '/api/v1/donations/check?order_id=' + orderId);
-  }
-
   getInitData$(): Observable<WebsocketResponse> {
     return this.httpClient.get<WebsocketResponse>(this.apiBaseUrl + this.apiBasePath + '/api/v1/init-data');
   }
@@ -323,4 +317,13 @@ export class ApiService {
         (timestamp ? `?timestamp=${timestamp}` : '')
     );
   }
+
+  /**
+   * Services
+   */
+  getNodeOwner$(publicKey: string) {
+    let params = new HttpParams()
+      .set('node_public_key', publicKey);
+    return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/lightning/claim/current`, { params, observe: 'response' });
+  }
 }

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

@@ -47,6 +47,7 @@ export interface Env {
   TESTNET_BLOCK_AUDIT_START_HEIGHT: number;
   SIGNET_BLOCK_AUDIT_START_HEIGHT: number;
   HISTORICAL_PRICE: boolean;
+  ACCELERATOR: boolean;
 }
 
 const defaultEnv: Env = {
@@ -77,6 +78,7 @@ const defaultEnv: Env = {
   'TESTNET_BLOCK_AUDIT_START_HEIGHT': 0,
   'SIGNET_BLOCK_AUDIT_START_HEIGHT': 0,
   'HISTORICAL_PRICE': true,
+  'ACCELERATOR': false,
 };
 
 @Injectable({

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

@@ -28,8 +28,9 @@ export class WebsocketService {
   private isTrackingTx = false;
   private trackingTxId: string;
   private isTrackingMempoolBlock = false;
-  private isTrackingRbf = false;
+  private isTrackingRbf: 'all' | 'fullRbf' | false = false;
   private isTrackingRbfSummary = false;
+  private isTrackingAddress: string | false = false;
   private trackingMempoolBlock: number;
   private latestGitCommit = '';
   private onlineCheckTimeout: number;
@@ -110,6 +111,15 @@ export class WebsocketService {
           if (this.isTrackingMempoolBlock) {
             this.startTrackMempoolBlock(this.trackingMempoolBlock);
           }
+          if (this.isTrackingRbf) {
+            this.startTrackRbf(this.isTrackingRbf);
+          }
+          if (this.isTrackingRbfSummary) {
+            this.startTrackRbfSummary();
+          }
+          if (this.isTrackingAddress) {
+            this.startTrackAddress(this.isTrackingAddress);
+          }
           this.stateService.connectionState$.next(2);
         }
 
@@ -151,10 +161,12 @@ export class WebsocketService {
 
   startTrackAddress(address: string) {
     this.websocketSubject.next({ 'track-address': address });
+    this.isTrackingAddress = address;
   }
 
   stopTrackingAddress() {
     this.websocketSubject.next({ 'track-address': 'stop' });
+    this.isTrackingAddress = false;
   }
 
   startTrackAsset(asset: string) {
@@ -178,7 +190,7 @@ export class WebsocketService {
 
   startTrackRbf(mode: 'all' | 'fullRbf') {
     this.websocketSubject.next({ 'track-rbf': mode });
-    this.isTrackingRbf = true;
+    this.isTrackingRbf = mode;
   }
 
   stopTrackRbf() {

frontend/src/app/shared/components/global-footer/global-footer.component.html

@@ -1,7 +1,7 @@
 <footer>
     <div class="container-fluid">
     <div class="row main">
-      <div class="offset-lg-1 col-lg-4 col align-self-center branding">
+      <div class="offset-lg-1 col-lg-4 col align-self-center branding mt-2">
         <div class="main-logo">
           <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
           <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126"></app-svg-images>
@@ -16,10 +16,12 @@
         <div class="selector">
           <app-rate-unit-selector></app-rate-unit-selector>
         </div>
-        <ng-template #temporaryHidden>
-          <a *ngIf="officialMempoolSpace" class="cta btn btn-purple sponsor" [routerLink]="['/signup' | relativeUrl]">Support the Project</a>
-          <p *ngIf="officialMempoolSpace && env.BASE_MODULE === 'mempool'" class="cta-secondary"><a [routerLink]="['/signin' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Sign In</a></p>
-        </ng-template>
+        <div *ngIf="officialMempoolSpace && stateService.env.ACCELERATOR" class="cta">
+          <a class="btn btn-purple sponsor" [routerLink]="['/login' | relativeUrl]">
+            <span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
+            <span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In / Sign Up</span>
+          </a>
+        </div>
       </div>
       <div class="col-lg-6 col-md-10 offset-md-1 links outer">
         <div class="row">

frontend/src/app/shared/components/global-footer/global-footer.component.scss

@@ -22,7 +22,7 @@ footer .row.main .branding {
 }
 
 footer .row.main .branding > p {
-  margin-bottom: 45px;
+  margin-bottom: 25px;
 }
 
 footer .row.main .branding .btn {
@@ -35,11 +35,7 @@ footer .row.main .branding button.account {
 }
 
 footer .row.main .branding .cta {
-  margin: 20px auto 25px auto;
-}
-
-footer .row.main .branding .cta-secondary {
-
+  margin: 25px auto 25px auto;
 }
 
 footer .row.main .links.outer {

frontend/src/app/shared/components/global-footer/global-footer.component.ts

@@ -1,10 +1,13 @@
-import { ChangeDetectionStrategy, Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
-import { Observable, merge, of, Subject } from 'rxjs';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, merge, of, Subject, Subscription } from 'rxjs';
 import { tap, takeUntil } from 'rxjs/operators';
 import { Env, StateService } from '../../../services/state.service';
 import { IBackendInfo } from '../../../interfaces/websocket.interface';
 import { LanguageService } from '../../../services/language.service';
 import { NavigationService } from '../../../services/navigation.service';
+import { StorageService } from '../../../services/storage.service';
+import { WebsocketService } from '../../../services/websocket.service';
 
 @Component({
   selector: 'app-global-footer',
@@ -23,12 +26,19 @@ export class GlobalFooterComponent implements OnInit {
   network$: Observable<string>;
   networkPaths: { [network: string]: string };
   currentNetwork = '';
+  loggedIn = false;
+  username = null;
+  urlSubscription: Subscription;
 
   constructor(
     public stateService: StateService,
     private languageService: LanguageService,
     private navigationService: NavigationService,
     @Inject(LOCALE_ID) public locale: string,
+    private storageService: StorageService,
+    private route: ActivatedRoute,
+    private cd: ChangeDetectorRef,
+    private websocketService: WebsocketService
   ) {}
 
   ngOnInit(): void {
@@ -46,11 +56,23 @@ export class GlobalFooterComponent implements OnInit {
     this.network$.pipe(takeUntil(this.destroy$)).subscribe((network) => {
       this.currentNetwork = network;
     });
+
+    this.urlSubscription = this.route.url.subscribe((url) => {
+      this.loggedIn = JSON.parse(this.storageService.getValue('auth')) !== null;
+      const auth = JSON.parse(this.storageService.getValue('auth'));
+      if (auth?.user?.username) {
+        this.username = auth.user.username;
+      } else {
+        this.username = null;
+      }
+      this.cd.markForCheck();
+    })
   }
 
   ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.complete();
+    this.urlSubscription.unsubscribe();
   }
 
   networkLink(network) {

frontend/src/app/shared/shared.module.ts

@@ -219,6 +219,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     AmountShortenerPipe,
   ],
   exports: [
+    MasterPageComponent,
     RouterModule,
     ReactiveFormsModule,
     NgbNavModule,

frontend/src/resources/profile/unknown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" data-v-4fa90e7f=""><path d="M14.33 7.17C13.588 7.058 12.807 7 12 7c-4.97 0-9 2.239-9 5 0 1.44 1.096 2.738 2.85 3.65l2.362-2.362a4 4 0 015.076-5.076l1.043-1.043zM11.23 15.926a4 4 0 004.695-4.695l2.648-2.647C20.078 9.478 21 10.68 21 12c0 2.761-4.03 5-9 5-.598 0-1.183-.032-1.749-.094l.98-.98zM17.793 5.207a1 1 0 111.414 1.414L6.48 19.35a1 1 0 11-1.414-1.414L17.793 5.207z"></path></svg>