Merge branch 'master' into hunicus/bird-x

2024-05-13 05:25:54 +09:00
parent 1312dd45e6 2133356047
commit 16fe1f3cec
110 changed files with 1834 additions and 659 deletions
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -168,6 +168,10 @@ let routes: Routes = [
        path: 'testnet',
        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
      },
+      {
+        path: 'testnet4',
+        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
+      },
      {
        path: 'signet',
        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
@@ -60,7 +60,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -148,7 +148,7 @@ export class AcceleratorDashboardComponent implements OnInit, OnDestroy {
    } else {
      const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
      const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
-      return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
+      return this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
    }
  }

--- a/frontend/src/app/components/address-graph/address-graph.component.scss
+++ b/frontend/src/app/components/address-graph/address-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/address-graph/address-graph.component.ts
+++ b/frontend/src/app/components/address-graph/address-graph.component.ts
@@ -73,7 +73,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
    if (!this.address || !this.stats) {
      return;
    }
-    if (changes.address || changes.isPubkey || changes.addressSummary$) {
+    if (changes.address || changes.isPubkey || changes.addressSummary$ || changes.stats) {
      if (this.subscription) {
        this.subscription.unsubscribe();
      }
@@ -248,7 +248,9 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
  }

  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
  }

  isMobile() {
--- a/frontend/src/app/components/address/address-preview.component.scss
+++ b/frontend/src/app/components/address/address-preview.component.scss
@@ -3,7 +3,7 @@
 }

 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/address/address.component.scss
+++ b/frontend/src/app/components/address/address.component.scss
@@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/asset/asset.component.scss
+++ b/frontend/src/app/components/asset/asset.component.scss
@@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/balance-widget/balance-widget.component.ts
+++ b/frontend/src/app/components/balance-widget/balance-widget.component.ts
@@ -57,8 +57,9 @@ export class BalanceWidgetComponent implements OnInit, OnChanges {
  calculateStats(summary: AddressTxSummary[]): void {
    let weekTotal = 0;
    let monthTotal = 0;
-    const weekAgo = (Date.now() / 1000) - (60 * 60 * 24 * 7);
-    const monthAgo = (Date.now() / 1000) - (60 * 60 * 24 * 30);
+
+    const weekAgo = (new Date(new Date().setHours(0, 0, 0, 0) - (7 * 24 * 60 * 60 * 1000)).getTime()) / 1000;
+    const monthAgo = (new Date(new Date().setHours(0, 0, 0, 0) - (30 * 24 * 60 * 60 * 1000)).getTime()) / 1000;
    for (let i = 0; i < summary.length && summary[i].time >= monthAgo; i++) {
      monthTotal += summary[i].value;
      if (summary[i].time >= weekAgo) {
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.scss
+++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -651,13 +651,13 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
    return (tx: TxView) => {
      if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
-        if (this.themeService.theme !== 'contrast') {
+        if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
          return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
        } else {
          return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000));
        }
      } else {
-        if (this.themeService.theme !== 'contrast') {
+        if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
          return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
            tx,
            defaultColors.unmatchedfee,
--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@@ -69,7 +69,7 @@ export default class BlockScene {
  }

  setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void {
-    this.theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
+    this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
    this.updateAllColors();
  }

@@ -246,7 +246,7 @@ export default class BlockScene {
    this.flip = flip;
    this.vertexArray = vertexArray;
    this.highlightingEnabled = highlighting;
-    theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
+    theme.theme === 'contrast' || theme.theme === 'bukele' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
    this.theme = theme;

    this.scene = {
--- a/frontend/src/app/components/block-overview-graph/utils.ts
+++ b/frontend/src/app/components/block-overview-graph/utils.ts
@@ -177,7 +177,7 @@ export function ageColorFunction(
    return auditColors.accelerated;
  }

-  const color = theme !== 'contrast' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime);
+  const color = theme !== 'contrast' && theme !== 'bukele' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime);

  const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60)))))));
  return {
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
@@ -1,6 +1,6 @@
 .block-overview-tooltip {
  position: absolute;
-  background: rgba(#11131f, 0.95);
+	background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  color: var(--tooltip-grey);
@@ -30,7 +30,7 @@ th, td {
 }

 .badge.badge-accelerated {
-  background-color: var(--tertiary);
+  background-color: #653b9c;
  box-shadow: #ad7de57f 0px 0px 12px -2px;
  color: white;
  animation: acceleratePulse 1s infinite;
@@ -71,7 +71,7 @@ th, td {
 }

@keyframes acceleratePulse {
-  0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
  50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}
-  100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
 }
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -63,7 +63,7 @@
 .fee-span {
  font-size: 11px;
  margin-bottom: 5px;
-  color: #fff000;
+  color: var(--yellow);
 }

 .transaction-count {
@@ -130,7 +130,7 @@
  height: 0;
  border-left: calc(var(--block-size) * 0.3) solid transparent;
  border-right: calc(var(--block-size) * 0.3) solid transparent;
-  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
+  border-bottom: calc(var(--block-size) * 0.3) solid var(--fg);
 }

 .flashing {
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -350,7 +350,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    return {
      left: addLeft + this.blockOffset * index + 'px',
      background: `repeating-linear-gradient(
-        #2d3348,
+        var(--secondary),
        var(--secondary) ${greenBackgroundHeight}%,
        ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
        ${this.gradientColors[this.network][1]} 100%
@@ -362,7 +362,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
  convertStyleForLoadingBlock(style) {
    return {
      ...style,
-      background: "#2d3348",
+      background: "var(--secondary)",
    };
  }

@@ -371,7 +371,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {

    return {
      left: addLeft + (this.blockOffset * index) + 'px',
-      background: "#2d3348",
+      background: "var(--secondary)",
    };
  }

--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@@ -54,7 +54,7 @@
 }

 .time-toggle {
-  color: white;
+  color: var(--fg);
  font-size: 0.8rem;
  position: absolute;
  bottom: -1.8em;
@@ -68,7 +68,7 @@
 }

 .block-display-toggle {
-  color: white;
+  color: var(--fg);
  font-size: 0.8rem;
  position: absolute;
  bottom: 15.8em;
--- a/frontend/src/app/components/clock/clock.component.ts
+++ b/frontend/src/app/components/clock/clock.component.ts
@@ -32,12 +32,12 @@ export class ClockComponent implements OnInit {
  limitHeight: number;

  gradientColors = {
-    '': ['#9339f4', '#105fb0'],
-    liquid: ['#116761', '#183550'],
-    'liquidtestnet': ['#494a4a', '#272e46'],
-    testnet: ['#1d486f', '#183550'],
-    testnet4: ['#1d486f', '#183550'],
-    signet: ['#6f1d5d', '#471850'],
+    '': ['var(--mainnet-alt)', 'var(--primary)'],
+    liquid: ['var(--liquid)', 'var(--testnet-alt)'],
+    'liquidtestnet': ['var(--liquidtestnet)', 'var(--liquidtestnet-alt)'],
+    testnet: ['var(--testnet)', 'var(--testnet-alt)'],
+    testnet4: ['var(--testnet)', 'var(--testnet-alt)'],
+    signet: ['var(--signet)', 'var(--signet-alt)'],
  };

  constructor(
@@ -100,8 +100,8 @@ export class ClockComponent implements OnInit {

    return {
      background: `repeating-linear-gradient(
-        #2d3348,
-        #2d3348 ${greenBackgroundHeight}%,
+        var(--secondary),
+        var(--secondary) ${greenBackgroundHeight}%,
        ${this.gradientColors[''][0]} ${Math.max(greenBackgroundHeight, 0)}%,
        ${this.gradientColors[''][1]} 100%
      )`,
--- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html
+++ b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html
@@ -4,7 +4,7 @@
    @for (widget of widgets; track widget.component) {
      @switch (widget.component) {
        @case ('fees') {
-          <div class="col card-wrapper">
+          <div class="col card-wrapper" [style.order]="isMobile && widget.mobileOrder || 8">
            <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
            <div class="card">
              <div class="card-body less-padding">
@@ -14,12 +14,12 @@
          </div>
        }
        @case ('difficulty') {
-          <div class="col">
+          <div class="col" [style.order]="isMobile && widget.mobileOrder || 8">
            <app-difficulty></app-difficulty>
          </div>
        }
        @case ('goggles') {
-          <div class="col">
+          <div class="col" [style.order]="isMobile && widget.mobileOrder || 8">
            <div class="card graph-card">
              <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
                <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
@@ -48,7 +48,7 @@
          </div>
        }
        @case ('incoming') {
-          <div class="col">
+          <div class="col" [style.order]="isMobile && widget.mobileOrder || 8">
            <div class="card graph-card">
              <div class="card-body">
                <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
@@ -93,7 +93,7 @@
          </ng-template>
        }
        @case ('replacements') {
-          <div class="col" style="max-height: 410px">
+          <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
            <div class="card">
              <div class="card-body">
                <a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]">
@@ -140,7 +140,7 @@
          </ng-template>
        }
        @case ('blocks') {
-          <div class="col" style="max-height: 410px">
+          <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
            <div class="card">
              <div class="card-body">
                <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
@@ -184,7 +184,7 @@
          </ng-template>
        }
        @case ('transactions') {
-          <div class="col" style="max-height: 410px">
+          <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title" i18n="dashboard.recent-transactions">Recent Transactions</h5>
@@ -224,13 +224,13 @@
          </ng-template>
        }
        @case ('balance') {
-          <div class="col card-wrapper">
+          <div class="col card-wrapper" [style.order]="isMobile && widget.mobileOrder || 8">
            <div class="main-title" i18n="dashboard.treasury">Treasury</div>
            <app-balance-widget [address]="widget.props.address" [addressSummary$]="addressSummary$" [addressInfo]="address"></app-balance-widget>
          </div>
        }
        @case ('address') {
-          <div class="col" style="max-height: 410px">
+          <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
            <div class="card graph-card">
              <div class="card-body">
                <a class="title-link" href="" [routerLink]="[('/address/' + widget.props.address) | relativeUrl]">
@@ -238,13 +238,13 @@
                  <span>&nbsp;</span>
                  <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
                </a>
-                <app-address-graph [address]="widget.props.address" [addressSummary$]="addressSummary$" [period]="widget.props.period || 'all'" [stats]="address?.chain_stats" [widget]="true" [height]="graphHeight"></app-address-graph>
+                <app-address-graph [address]="widget.props.address" [addressSummary$]="addressSummary$" [period]="widget.props.period || 'all'" [stats]="address ? address.chain_stats : null" [widget]="true" [height]="graphHeight"></app-address-graph>
              </div>
            </div>
          </div>
        }
        @case ('addressTransactions') {
-          <div class="col" style="max-height: 410px">
+          <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
            <div class="card">
              <div class="card-body">
                <a class="title-link" href="" [routerLink]="[('/address/' + widget.props.address) | relativeUrl]">
@@ -257,6 +257,22 @@
            </div>
          </div>
        }
+        @case ('twitter') {
+          <div class="col" style="min-height:410px" [style.order]="isMobile && widget.mobileOrder || 8">
+            <div class="card graph-card">
+              <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2 d-flex flex-column">
+                <a class="title-link" [href]="'https://x.com/' + widget.props?.handle" target="_blank">
+                  <h5 class="card-title d-inline" i18n="dashboard.x-timeline">X Timeline</h5>
+                  <span>&nbsp;</span>
+                  <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
+                </a>
+                @defer {
+                  <app-twitter-widget [handle]="widget.props?.handle" style="flex-grow: 1"></app-twitter-widget>
+                }
+              </div>
+            </div>
+          </div>
+        }
      }
    }
  </div>
--- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts
+++ b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { combineLatest, merge, Observable, of, Subject, Subscription } from 'rxjs';
 import { catchError, filter, map, scan, share, shareReplay, startWith, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended, OptimizedMempoolStats, TransactionStripped } from '../../interfaces/node-api.interface';
@@ -57,6 +57,7 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
  incomingGraphHeight: number = 300;
  graphHeight: number = 300;
  webGlEnabled = true;
+  isMobile: boolean = window.innerWidth <= 767.98;

  widgets;

@@ -85,6 +86,7 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
    private electrsApiService: ElectrsApiService,
    private websocketService: WebsocketService,
    private seoService: SeoService,
+    private cd: ChangeDetectorRef,
    @Inject(PLATFORM_ID) private platformId: Object,
  ) {
    this.webGlEnabled = this.stateService.isBrowser && detectWebGL();
@@ -230,8 +232,10 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
            this.stateService.live2Chart$
              .pipe(
                scan((acc, stats) => {
+                  const now = Date.now() / 1000;
+                  const start = now - (2 * 60 * 60);
                  acc.unshift(stats);
-                  acc = acc.slice(0, 120);
+                  acc = acc.filter(p => p.added >= start);
                  return acc;
                }, (mempoolStats || []))
              ),
@@ -283,8 +287,8 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni

  startAddressSubscription(): void {
    if (this.stateService.env.customize && this.stateService.env.customize.dashboard.widgets.some(w => w.props?.address)) {
-      const address = this.stateService.env.customize.dashboard.widgets.find(w => w.props?.address).props.address;
-      const addressString = (/^[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100}|04[a-fA-F0-9]{128}|(02|03)[a-fA-F0-9]{64}$/.test(address)) ? address.toLowerCase() : address;
+      let addressString = this.stateService.env.customize.dashboard.widgets.find(w => w.props?.address).props.address;
+      addressString = (/^[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100}|04[a-fA-F0-9]{128}|(02|03)[a-fA-F0-9]{64}$/.test(addressString)) ? addressString.toLowerCase() : addressString;
      
      this.addressSubscription = (
        addressString.match(/04[a-fA-F0-9]{128}|(02|03)[a-fA-F0-9]{64}/)
@@ -299,6 +303,7 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
        ).subscribe((address: Address) => {
          this.websocketService.startTrackAddress(address.address);
          this.address = address;
+          this.cd.markForCheck();
        });

      this.addressSummary$ = (
@@ -368,5 +373,6 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
      this.goggleResolution = 86;
      this.graphHeight = 310;
    }
+    this.isMobile = window.innerWidth <= 767.98;
  }
 }
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
@@ -119,7 +119,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
@@ -1,9 +1,9 @@
 .difficulty-tooltip {
  position: fixed;
-  background: rgba(#11131f, 0.95);
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  padding: 10px 15px;
  text-align: left;
  pointer-events: none;
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@@ -15,8 +15,8 @@
          <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" />
-                <stop offset="100%" stop-color="#9339f4" />
+                <stop offset="0%" stop-color="var(--primary)" />
+                <stop offset="100%" stop-color="var(--mainnet-alt)" />
              </linearGradient>
              <linearGradient id="diff-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#2486eb" />
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@@ -128,7 +128,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
@@ -223,7 +224,7 @@
    height: 100%;
  }
  .background {
-    background: linear-gradient(to right, var(--primary), #9339f4);
+    background: linear-gradient(to right, var(--primary), var(--mainnet-alt));
    left: 0;
    right: 0;
  }
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@@ -79,7 +79,7 @@
  display: flex;
  flex-direction: row;
  transition: background-color 1s;
-  color: var(--color-fg);
+  color: #fff;
  &.priority {
    @media (767px < width < 992px), (width < 576px) {
      width: 100%;
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@@ -16,8 +16,8 @@ export class FeesBoxComponent implements OnInit, OnDestroy {
  isLoading$: Observable<boolean>;
  recommendedFees$: Observable<Recommendedfees>;
  themeSubscription: Subscription;
-  gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
-  noPriority = '#2e324e';
+  gradient = 'linear-gradient(to right, var(--skeleton-bg), var(--skeleton-bg))';
+  noPriority = 'var(--skeleton-bg)';
  fees: Recommendedfees;

  constructor(
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@@ -66,7 +66,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
    if (!this.data) {
      return;
    }
-    this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
+    this.windowPreference = (this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference')) || '2h';
    const windowSize = Math.max(10, Math.floor(this.data.series[0].length / 8));
    this.MA = this.calculateMA(this.data.series[0], windowSize);
    if (this.outlierCappingEnabled === true) {
@@ -216,22 +216,19 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
          type: 'line',
        },
        formatter: (params: any) => {
-          const axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);
+          const bestItem = params.reduce((best, item) => {
+            return (item.seriesName === 'data' && (!best || best.value[1] < item.value[1])) ? item : best;
+          }, null);
+          const axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, bestItem.axisValue);
          const colorSpan = (color: string) => `<span class="indicator" style="background-color: ` + color + `"></span>`;
          let itemFormatted = '<div class="title">' + axisValueLabel + '</div>';
-          params.map((item: any, index: number) => {
-
-            //Do no include MA in tooltip legend!
-            if (item.seriesName !== 'MA') {
-              if (index < 26) {
-                itemFormatted += `<div class="item">
-                  <div class="indicator-container">${colorSpan(item.color)}</div>
+          if (bestItem) {
+            itemFormatted += `<div class="item">
+                  <div class="indicator-container">${colorSpan(bestItem.color)}</div>
                  <div class="grow"></div>
-                  <div class="value">${formatNumber(item.value[1], this.locale, '1.0-0')}<span class="symbol">vB/s</span></div>
+                  <div class="value">${formatNumber(bestItem.value[1], this.locale, '1.0-0')}<span class="symbol">vB/s</span></div>
                </div>`;
-              }
-            }
-          });
+          }
          return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}" 
                  style="width: ${(this.windowPreference === '2h' || this.template === 'widget') ? '125px' : '215px'}">${itemFormatted}</div>`;
        }
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
@@ -4,6 +4,7 @@
  top: 0;
  width: 100%;
  z-index: 100;
+  background-color: var(--bg);
 }

 li.nav-item.active {
@@ -17,7 +18,7 @@ fa-icon {
 .navbar {
  z-index: 100;
  min-height: 64px;
-  background-color: var(--bg);
+  background-color: var(--nav-bg);
 }

 li.nav-item {
@@ -48,7 +49,7 @@ li.nav-item {
 }

 .navbar-nav {
-  background: var(--navbar-bg);
+  background: var(--nav-bg);
  bottom: 0;
  box-shadow: 0px 0px 15px 0px #000;
  flex-direction: row;
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.html
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.html
@@ -6,7 +6,7 @@
        <img [src]="enterpriseInfo.img" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
      }
      @if (enterpriseInfo?.header_img) {
-        <img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
+        <img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="60px" class="mr-3">
      } @else {
        <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" width="500" height="126" class="mempool-logo" style="width: 200px; height: 50px"></app-svg-images>
        <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
@@ -5,6 +5,7 @@
  max-width: 1200px;
  max-height: 600px;
  padding-top: 80px;
+  background: var(--nav-bg);

  header {
    position: absolute;
@@ -18,7 +19,7 @@
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
-    background: var(--stat-box-bg);
+    background: var(--nav-bg);
    text-align: start;
    font-size: 1.8em;
  }
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -17,16 +17,16 @@

  <!-- Large screen -->
  <a class="navbar-brand d-none d-md-flex" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
-    <ng-template [ngIf]="subdomain && enterpriseInfo">
-      <div class="subdomain_container">
-        <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
-      </div>
-      <div class="vertical-line"></div>
-    </ng-template>
    <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
      @if (enterpriseInfo?.header_img) {
-        <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
+        <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="48px" class="mr-3">
      } @else {
+        <ng-template [ngIf]="subdomain && enterpriseInfo">
+          <div class="subdomain_container">
+            <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+          </div>
+          <div class="vertical-line"></div>
+        </ng-template>
        <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
        <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
      }
@@ -38,24 +38,28 @@
  </a>
  <!-- Mobile -->
  <a class="navbar-brand d-flex d-md-none justify-content-center" [ngClass]="{'dual-logos': subdomain, 'mr-0': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
-    <ng-template [ngIf]="subdomain && enterpriseInfo">
-      <div class="subdomain_container">
-        <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
-      </div>
-      <div class="vertical-line"></div>
-    </ng-template>
-    <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
-      @if (enterpriseInfo?.header_img) {
-        <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
-      } @else {
-        <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
-        <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
-      }
-        <div class="connection-badge">
-        <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
-        <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
-      </div>
-    </ng-container>
+    @if (enterpriseInfo?.header_img) {
+      <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="42px">
+    } @else {
+      <ng-template [ngIf]="subdomain && enterpriseInfo">
+        <div class="subdomain_container">
+          <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+        </div>
+        <div class="vertical-line"></div>
+      </ng-template>
+      <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
+        @if (enterpriseInfo?.header_img) {
+          <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
+        } @else {
+          <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
+          <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
+        }
+          <div class="connection-badge">
+          <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
+          <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
+        </div>
+      </ng-container>
+    }
  </a>

  <div (window:resize)="onResize()" ngbDropdown class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.TESTNET4_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.LIQUID_TESTNET_ENABLED">
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -3,6 +3,7 @@
  position: -webkit-sticky;
  top: 0;
  width: 100%;
+  background-color: var(--bg);
  z-index: 100;
 }

@@ -18,7 +19,7 @@ fa-icon {
  z-index: 100;
  min-height: 64px;
  width: 100%;
-  background-color: var(--bg);
+  background-color: var(--nav-bg);
 }

 li.nav-item {
@@ -59,7 +60,7 @@ li.nav-item {
 }

 .navbar-nav {
-  background: var(--navbar-bg);
+  background: var(--nav-bg);
  bottom: 0;
  box-shadow: 0px 0px 15px 0px #000;
  flex-direction: row;
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -56,7 +56,7 @@
 .fee-span {
  font-size: 11px;
  margin-bottom: 5px;
-  color: #fff000;
+  color: var(--yellow);
 }

 .transaction-count {
@@ -119,7 +119,7 @@
  height: 0;
  border-left: calc(var(--block-size) * 0.3) solid transparent;
  border-right: calc(var(--block-size) * 0.3) solid transparent;
-  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
+  border-bottom: calc(var(--block-size) * 0.3) solid var(--fg);
 }

 .blockLink {
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -77,7 +77,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
    }
    this.isWidget = this.template === 'widget';
    this.showCount = !this.isWidget && !this.hideCount;
-    this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
+    this.windowPreference = (this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference')) || '2h';
    this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
    this.mountFeeChart();
  }
@@ -256,11 +256,17 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
          const itemFormatted = [];
          let sum = 0;
          let progressPercentageText = '';
-          let countItem;
-          let items = this.inverted ? [...params].reverse() : params;
-          if (items[items.length - 1].seriesName === 'count') {
-            countItem = items.pop();
-          }
+          const unfilteredItems = this.inverted ? [...params].reverse() : params;
+          const countItem = unfilteredItems.find(p => p.seriesName === 'count');
+          const usedSeries = {};
+          const items = unfilteredItems.filter(p => {
+            if (usedSeries[p.seriesName] || p.seriesName === 'count') {
+              return false;
+            }
+            usedSeries[p.seriesName] = true;
+            return true;
+          });
+
          items.map((item: any, index: number) => {
            sum += item.value[1];
            const progressPercentage = (item.value[1] / totalValue) * 100;
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -63,7 +63,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
@@ -1,10 +1,10 @@
 .rbf-tooltip {
  position: fixed;
  z-index: 3;
-  background: rgba(#11131f, 0.95);
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@@ -159,7 +159,7 @@

      &.selected {
        .shape-border {
-          background: #9339f4;
+          background: var(--mainnet-alt);
        }
      }

@@ -183,7 +183,7 @@
          width: calc(1em + 16px);

          .shape {
-            border: solid 4px #9339f4;
+            border: solid 4px var(--mainnet-alt);
          }

          &:hover {
--- a/frontend/src/app/components/television/television.component.ts
+++ b/frontend/src/app/components/television/television.component.ts
@@ -71,7 +71,9 @@ export class TelevisionComponent implements OnInit, OnDestroy {
          mempoolStats = newStats;
        } else if (['2h', '24h'].includes(this.fragment)) {
          mempoolStats.unshift(newStats[0]);
-          mempoolStats = mempoolStats.slice(0, mempoolStats.length - 1);
+          const now = Date.now() / 1000;
+          const start = now - (this.fragment === '2h' ? (2 * 60 * 60) : (24 * 60 * 60) );
+          mempoolStats = mempoolStats.filter(p => p.added >= start);
        }
        return mempoolStats;
      })
--- a/frontend/src/app/components/terms-of-service/terms-of-service.component.html
+++ b/frontend/src/app/components/terms-of-service/terms-of-service.component.html
@@ -11,7 +11,7 @@

    <div class="text-left">

-        <p *ngIf="officialMempoolSpace">The <a href="https://mempool.space/">mempool.space</a> website, the <a href="https://liquid.network/">liquid.network</a> website, their associated API services, and related network and server infrastructure (collectively, the "Website") are operated by Mempool Space K.K. in Japan ("Mempool", "We", or "Us") and self-hosted from <a href="https://bgp.tools/as/142052#connectivity">AS142052</a>.</p>
+        <p *ngIf="officialMempoolSpace">The <a href="https://mempool.space/">mempool.space</a> website, the <a href="https://liquid.network/">liquid.network</a> website, the <a href="https://bitcoin.gob.sv/">bitcoin.gob.sv</a> website, their associated API services, and related network and server infrastructure (collectively, the "Website") are operated by Mempool Space K.K. in Japan ("Mempool", "We", or "Us") and self-hosted from <a href="https://bgp.tools/as/142052#connectivity">AS142052</a>.</p>

        <p *ngIf="!officialMempoolSpace">This website and its API service (collectively, the "Website") are operated by a member of the Bitcoin community ("We" or "Us"). Mempool Space K.K. in Japan ("Mempool") has no affiliation with the operator of this Website, and does not sponsor or endorse the information provided herein.</p>

--- a/frontend/src/app/components/theme-selector/theme-selector.component.ts
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.ts
@@ -11,7 +11,7 @@ import { Subscription } from 'rxjs';
 })
 export class ThemeSelectorComponent implements OnInit {
  themeForm: UntypedFormGroup;
-  themes = ['default', 'contrast', 'wiz'];
+  themes = ['default', 'contrast', 'wiz', 'bukele'];
  themeSubscription: Subscription;

  constructor(
--- a/frontend/src/app/components/tracker/tracker.component.html
+++ b/frontend/src/app/components/tracker/tracker.component.html
@@ -1,9 +1,26 @@
 <div class="mobile-wrapper">
  <div class="mobile-container">
    <div class="panel">
-      <div class="field nav-header">
-          <app-svg-images name="officialMempoolSpace" style="width: 144px; height: 36px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
-          <div [ngSwitch]="network" class="network-label">
+      <div class="nav-header">
+        @if (enterpriseInfo?.header_img) {
+          <a class="d-flex" [routerLink]="['/' | relativeUrl]">
+            <img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="42px">
+          </a>
+        } @else if (enterpriseInfo?.img || enterpriseInfo?.imageMd5) {
+          <a [routerLink]="['/' | relativeUrl]">
+            <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + enterpriseInfo.name + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+          </a>
+          <div class="vertical-line"></div>
+        }
+        @if (!enterpriseInfo?.header_img) {
+          <a [routerLink]="['/' | relativeUrl]">
+            <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" style="width: 144px; height: 36px" viewBox="0 0 500 126" width="500" height="126" class="mempool-logo"></app-svg-images>
+            <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 144px; height: 36px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
+          </a>
+        }
+
+        @if (enterpriseInfo?.header_img || (!enterpriseInfo?.img && !enterpriseInfo?.imageMd5)) {
+          <div [ngSwitch]="network" class="network-label" [class.hide-name]="enterpriseInfo?.header_img">
            <span *ngSwitchCase="'signet'" class="network signet"><span class="name">Bitcoin Signet</span><app-svg-images name="signet" width="35" height="35" viewBox="0 0 65 65" style="display: inline-block" class="mainnet ml-2"></app-svg-images></span>
            <span *ngSwitchCase="'testnet'" class="network testnet"><span class="name">Bitcoin Testnet3</span><app-svg-images name="testnet" width="35" height="35" viewBox="0 0 65 65" style="display: inline-block" class="mainnet ml-2"></app-svg-images></span>
            <span *ngSwitchCase="'testnet4'" class="network testnet"><span class="name">Bitcoin Testnet4</span><app-svg-images name="testnet4" width="35" height="35" viewBox="0 0 65 65" style="display: inline-block" class="mainnet ml-2"></app-svg-images></span>
@@ -11,6 +28,7 @@
            <span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><span class="name">Liquid Testnet</span><app-svg-images name="liquidtestnet" width="35" height="35" viewBox="0 0 125 125" style="display: inline-block" class="mainnet ml-2"></app-svg-images></span>
            <span *ngSwitchDefault class="network mainnet"><span class="name">Bitcoin</span><app-svg-images name="bitcoin" width="35" height="35" viewBox="0 0 65 65" style="display: inline-block" class="mainnet ml-2"></app-svg-images></span>
          </div>
+        }
      </div>
      <div class="field">
        <div class="label" i18n="shared.transaction">Transaction</div>
--- a/frontend/src/app/components/tracker/tracker.component.scss
+++ b/frontend/src/app/components/tracker/tracker.component.scss
@@ -40,7 +40,14 @@
 }

 .nav-header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 100%;
+  max-width: 100%;
+  padding: 1em;
  position: relative;
+  background: var(--nav-bg);
  box-shadow: 0 -5px 15px #000;
  z-index: 100;
  align-items: center;
@@ -53,6 +60,40 @@
      flex-direction: row;
      align-items: center;
    }
+
+    &.hide-name .name {
+      display: none;
+    }
+  }
+
+  .subdomain_logo {
+    height: 35px;
+    overflow: clip;
+    max-width: 140px;
+    margin: auto;
+    align-self: center;
+    .rounded {
+      border-radius: 5px;
+    }
+  }
+
+  .subdomain_container {
+    max-width: 140px;
+    text-align: center;
+    align-self: center;
+  }
+
+  .vertical-line {
+    border-left: 1px solid #444;
+    height: 30px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-top: 3px;
+  }
+
+  .logo-holder {
+    display: flex;
+    flex-direction: row;
  }
 }

--- a/frontend/src/app/components/tracker/tracker.component.ts
+++ b/frontend/src/app/components/tracker/tracker.component.ts
@@ -113,6 +113,10 @@ export class TrackerComponent implements OnInit, OnDestroy {
  scrollIntoAccelPreview = false;
  auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true;

+  enterpriseInfo: any;
+  enterpriseInfo$: Subscription;
+  officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
+
  constructor(
    private route: ActivatedRoute,
    private electrsApiService: ElectrsApiService,
@@ -152,6 +156,10 @@ export class TrackerComponent implements OnInit, OnDestroy {

    this.enterpriseService.page();

+    this.enterpriseInfo$ = this.enterpriseService.info$.subscribe(info => {
+      this.enterpriseInfo = info;
+    });
+
    this.websocketService.want(['blocks', 'mempool-blocks']);
    this.stateService.networkChanged$.subscribe(
      (network) => {
@@ -702,6 +710,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
    this.blocksSubscription.unsubscribe();
    this.miningSubscription?.unsubscribe();
    this.currencyChangeSubscription?.unsubscribe();
+    this.enterpriseInfo$?.unsubscribe();
    this.leaveTransaction();
  }
 }
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -103,7 +103,8 @@ td.amount.large {
 	margin-top: 10px;
 }
 .assetBox {
-	background-color: #653b9c90;
+	background: color-mix(in srgb, var(--tertiary) 56%, transparent);
+
 }

 .details-container {
--- a/frontend/src/app/components/twitter-widget/twitter-widget.component.html
+++ b/frontend/src/app/components/twitter-widget/twitter-widget.component.html
@@ -0,0 +1,16 @@
+@if (loading) {
+  <div class="spinner-wrapper">
+    <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
+  </div>
+} @else if (error) {
+  <div class="error-wrapper">
+    <span>failed to load X timeline</span>
+  </div>
+}
+<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true"
+  title="Twitter Timeline"
+  [src]="iframeSrc"
+  style="position: static; visibility: visible; width: 100%; height: 100%; display: block; flex-grow: 1;"
+  (load)="onReady()"
+></iframe>
+
--- a/frontend/src/app/components/twitter-widget/twitter-widget.component.scss
+++ b/frontend/src/app/components/twitter-widget/twitter-widget.component.scss
@@ -0,0 +1,10 @@
+.spinner-wrapper, .error-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
--- a/frontend/src/app/components/twitter-widget/twitter-widget.component.ts
+++ b/frontend/src/app/components/twitter-widget/twitter-widget.component.ts
@@ -0,0 +1,71 @@
+import { Component, Input, ChangeDetectionStrategy, SecurityContext, SimpleChanges, OnChanges } from '@angular/core';
+import { LanguageService } from '../../services/language.service';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-twitter-widget',
+  templateUrl: './twitter-widget.component.html',
+  styleUrls: ['./twitter-widget.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TwitterWidgetComponent implements OnChanges {
+  @Input() handle: string;
+  @Input() width = 300;
+  @Input() height = 400;
+
+  loading: boolean = true;
+  error: boolean = false;
+  lang: string = 'en';
+
+  iframeSrc: SafeResourceUrl;
+
+  constructor(
+    private languageService: LanguageService,
+    public sanitizer: DomSanitizer,
+  ) {
+    this.lang = this.languageService.getLanguage();
+    this.setIframeSrc();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.handle) {
+      this.setIframeSrc();
+    }
+  }
+
+  setIframeSrc(): void {
+    if (this.handle) {
+      this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.sanitizer.sanitize(SecurityContext.URL,
+        `https://syndication.twitter.com/srv/timeline-profile/screen-name/${this.handle}?creatorScreenName=mempool`
+        + '&dnt=true'
+        + '&embedId=twitter-widget-0'
+        + '&features=eyJ0ZndfdGltZWxpbmVfgbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D'
+        + '&frame=false'
+        + '&hideBorder=true'
+        + '&hideFooter=false'
+        + '&hideHeader=true'
+        + '&hideScrollBar=false'
+        + `&lang=${this.lang}`
+        + '&maxHeight=500px'
+        + '&origin=https%3A%2F%2Fmempool.space%2F'
+        // + '&sessionId=88f6d661d0dcca99c43c0a590f6a3e61c89226a9'
+        + '&showHeader=false'
+        + '&showReplies=false'
+        + '&siteScreenName=mempool'
+        + '&theme=dark'
+        + '&transparent=true'
+        + '&widgetsVersion=2615f7e52b7e0%3A1702314776716'
+      ));
+    }
+  }
+
+  onReady(): void {
+    this.loading = false;
+    this.error = false;
+  }
+
+  onFailed(): void {
+    this.loading = false;
+    this.error = true;
+  }
+}
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
+++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
@@ -1,6 +1,6 @@
 .bowtie-graph-tooltip {
  position: absolute;
-  background: rgba(#11131f, 0.95);
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  color: var(--tooltip-grey);
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
@@ -84,7 +84,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
  refreshOutspends$: ReplaySubject<string> = new ReplaySubject();

  gradientColors = {
-    '': ['#9339f4', '#105fb0', '#9339f400'],
+    '': ['var(--mainnet-alt)', 'var(--primary)', 'color-mix(in srgb, var(--mainnet-alt) 1%, transparent)'],
    // liquid: ['#116761', '#183550'],
    liquid: ['#09a197', '#0f62af', '#09a19700'],
    // 'liquidtestnet': ['#494a4a', '#272e46'],
@@ -96,7 +96,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
    signet: ['#d24fc8', '#a84fd2', '#d24fc800'],
  };

-  gradient: string[] = ['#105fb0', '#105fb0'];
+  gradient: string[] = ['var(--primary)', 'var(--primary)'];

  constructor(
    private router: Router,
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -301,7 +301,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
@@ -435,7 +436,8 @@

 .in-progress-message {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: 20px;
  text-align: center;
  padding-bottom: 3px;
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -231,8 +231,10 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
            this.stateService.live2Chart$
              .pipe(
                scan((acc, stats) => {
+                  const now = Date.now() / 1000;
+                  const start = now - (2 * 60 * 60);
                  acc.unshift(stats);
-                  acc = acc.slice(0, 120);
+                  acc = acc.filter(p => p.added >= start);
                  return acc;
                }, (mempoolStats || []))
              ),
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@@ -66,7 +66,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -27,12 +27,15 @@ export interface Customization {
    name: string;
    site_id?: number;
    title: string;
-    img: string;
+    img?: string;
+    header_img?: string;
+    footer_img?: string;
    rounded_corner: boolean;
  },
  dashboard: {
    widgets: {
      component: string;
+      mobileOrder?: number;
      props: { [key: string]: any };
    }[];
  };
--- a/frontend/src/app/services/theme.service.ts
+++ b/frontend/src/app/services/theme.service.ts
@@ -17,14 +17,14 @@ export class ThemeService {
    private storageService: StorageService,
    private stateService: StateService,
  ) {
-    const theme = this.storageService.getValue('theme-preference') || this.stateService.env.customize?.theme || 'default';
+    const theme = this.stateService.env.customize?.theme || this.storageService.getValue('theme-preference') || 'default';
    this.apply(theme);
  }

  apply(theme) {
    this.theme = theme;
    if (theme !== 'default') {
-      theme === 'contrast' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors;
+      theme === 'contrast'  || theme === 'bukele' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors;
      try {
        if (!this.style) {
          this.style = document.createElement('link');
@@ -44,7 +44,9 @@ export class ThemeService {
        this.style = null;
      }
    }
-    this.storageService.setValue('theme-preference', theme);
+    if (!this.stateService.env.customize?.theme) {
+      this.storageService.setValue('theme-preference', theme);
+    }
    this.themeChanged$.next(this.theme);
  }
 }
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -4,13 +4,19 @@
    <div class="row main" [class]="{'services': isServicesPage}">
      <div class="col-md-12 branding mt-2">
        <div class="main-logo" [class]="{'services': isServicesPage}">
-          <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>
+          @if (enterpriseInfo?.footer_img) {
+            <img [src]="enterpriseInfo?.footer_img" alt="enterpriseInfo.title" height="60px" class="mr-3">
+          } @else {
+            <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>
+          }
        </div>
-        <p class="explore-tagline-mobile">
-          <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
-          <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
-        </p>
+        @if (!enterpriseInfo?.footer_img) {
+          <p class="explore-tagline-mobile">
+            <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
+            <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
+          </p>
+        }
        <div class="site-options language-selector d-flex justify-content-center align-items-center" [class]="{'services': isServicesPage}">
          <div class="selector">
            <app-language-selector></app-language-selector>
@@ -21,25 +27,31 @@
          <div class="selector">
            <app-rate-unit-selector></app-rate-unit-selector>
          </div>
-          <div class="selector d-none d-sm-flex">
-            <app-theme-selector></app-theme-selector>
-          </div>
+          @if (!env.customize?.theme) {
+            <div class="selector d-none d-sm-flex">
+              <app-theme-selector></app-theme-selector>
+            </div>
+          }
          <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]">
            <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
            <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
          </a>
        </div>
-        <div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0">
-          <app-theme-selector></app-theme-selector>
-        </div>
-        <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login' | relativeUrl]">
-          <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
-          <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
-        </a>
-        <p class="explore-tagline-desktop">
-          <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
-          <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
-        </p>
+        @if (!env.customize?.theme) {
+          <div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0">
+            <app-theme-selector></app-theme-selector>
+          </div>
+        }
+        @if (!enterpriseInfo?.footer_img) {
+          <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login' | relativeUrl]">
+            <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
+            <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
+          </a>
+          <p class="explore-tagline-desktop">
+            <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
+            <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
+          </p>
+        }
      </div>
    </div>
    <div class="row col-md-12 link-tree" [class]="{'services': isServicesPage}">
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.ts
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID, HostListener } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID, HostListener, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Observable, merge, of, Subject, Subscription } from 'rxjs';
 import { tap, takeUntil } from 'rxjs/operators';
@@ -8,6 +8,7 @@ import { LanguageService } from '../../../services/language.service';
 import { NavigationService } from '../../../services/navigation.service';
 import { StorageService } from '../../../services/storage.service';
 import { WebsocketService } from '../../../services/websocket.service';
+import { EnterpriseService } from '../../../services/enterprise.service';

@Component({
  selector: 'app-global-footer',
@@ -15,7 +16,7 @@ import { WebsocketService } from '../../../services/websocket.service';
  styleUrls: ['./global-footer.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GlobalFooterComponent implements OnInit {
+export class GlobalFooterComponent implements OnInit, OnDestroy {
  private destroy$: Subject<any> = new Subject<any>();
  env: Env;
  officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
@@ -32,10 +33,14 @@ export class GlobalFooterComponent implements OnInit {
  urlSubscription: Subscription;
  isServicesPage = false;

+  enterpriseInfo: any;
+  enterpriseInfo$: Subscription;
+
  constructor(
    public stateService: StateService,
    private languageService: LanguageService,
    private navigationService: NavigationService,
+    private enterpriseService: EnterpriseService,
    @Inject(LOCALE_ID) public locale: string,
    private storageService: StorageService,
    private route: ActivatedRoute,
@@ -54,6 +59,9 @@ export class GlobalFooterComponent implements OnInit {
    this.navigationService.subnetPaths.subscribe((paths) => {
      this.networkPaths = paths;
    });
+    this.enterpriseInfo$ = this.enterpriseService.info$.subscribe(info => {
+      this.enterpriseInfo = info;
+    });
    this.network$ = merge(of(''), this.stateService.networkChanged$).pipe(
      tap((network: string) => {
        return network;
@@ -73,6 +81,9 @@ export class GlobalFooterComponent implements OnInit {
    this.destroy$.next(true);
    this.destroy$.complete();
    this.urlSubscription.unsubscribe();
+    if (this.enterpriseInfo$) {
+      this.enterpriseInfo$.unsubscribe();
+    }
  }

  networkLink(network) {
--- a/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html
+++ b/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html
@@ -1,6 +1,14 @@
 <div class="container p-lg-0 pb-0" style="max-width: 100%; margin-top: 7px" *ngIf="storageService.getValue('hideWarning') !== 'hidden'">
  <div class="alert alert-danger mb-0 text-center">
-    <div class="message-container" i18n="warning-testnet">This is a test network. Coins have no value.</div>
+    <div class="message-container">
+      <span i18n="warning-testnet">This is a test network. Coins have no value.</span>
+      @if (stateService.network === 'testnet') {
+        <span i18n="testnet3-deprecated">Testnet3 is deprecated, and will soon be replaced by <a href="/testnet4">Testnet4</a></span>
+      }
+      @if (stateService.network === 'testnet4') {
+        <span i18n="testnet4-not-finalized">Testnet4 is not yet finalized, and may be reset at anytime.</span>
+      }
+    </div>
    <button type="button" class="close" (click)="dismissWarning()">
      <span aria-hidden="true">&times;</span>
    </button>
--- a/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss
+++ b/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss
@@ -7,10 +7,12 @@

  display: flex;
  justify-content: center;
+  align-items: flex-start;
 }

 .message-container {
  display: flex;
+  flex-direction: column;
  margin-left: auto;
 }

--- a/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.ts
+++ b/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { StorageService } from '../../../services/storage.service';
+import { StateService } from '../../../services/state.service';

@Component({
  selector: 'app-testnet-alert',
@@ -11,6 +12,7 @@ export class TestnetAlertComponent {

  constructor(
    public storageService: StorageService,
+    public stateService: StateService,
  ) { }

  dismissWarning(): void {
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -113,6 +113,7 @@ import { ClockComponent } from '../components/clock/clock.component';
 import { CalculatorComponent } from '../components/calculator/calculator.component';
 import { BitcoinsatoshisPipe } from '../shared/pipes/bitcoinsatoshis.pipe';
 import { HttpErrorComponent } from '../shared/components/http-error/http-error.component';
+import { TwitterWidgetComponent } from '../components/twitter-widget/twitter-widget.component';

 import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-directives/weight-directives';

@@ -226,6 +227,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
    AccelerateCheckout,
    PendingStatsComponent,
    HttpErrorComponent,
+    TwitterWidgetComponent,
  ],
  imports: [
    CommonModule,
@@ -354,6 +356,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
    AccelerateCheckout,
    PendingStatsComponent,
    HttpErrorComponent,
+    TwitterWidgetComponent,

    MempoolBlockOverviewComponent,
    ClockchainComponent,