Merge branch 'master' into update-empty-block-explainer

2024-05-17 15:43:53 +09:00
parent d6d56688ea 1d91e76ec2
commit 6b2b3459f7
36 changed files with 1233 additions and 104 deletions
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@@ -343,8 +343,8 @@
      <a href="https://opencrypto.org/" title="Coppa - Crypto Open Patent Alliance">
        <img class="copa" src="/resources/profile/copa.png" />
      </a>
-      <a href="https://bisq.network/" title="Bisq Network">
-        <img class="bisq" src="/resources/profile/bisq.svg" />
+      <a href="https://bitcoin.gob.sv" title="Oficina Nacional del Bitcoin">
+        <img class="sv" src="/resources/profile/onbtc-full.svg" />
      </a>
    </div>
  </div>
--- a/frontend/src/app/components/about/about.component.scss
+++ b/frontend/src/app/components/about/about.component.scss
@@ -129,8 +129,9 @@
      position: relative;
      width: 300px;
    }
-    .bisq {
-      top: 3px;
+    .sv {
+      height: 85px;
+      width: auto;
      position: relative;
    }
  }
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -175,6 +175,9 @@ export class AddressComponent implements OnInit, OnDestroy {
        });

        this.transactions = this.tempTransactions;
+        if (this.transactions.length === this.txCount) {
+          this.fullyLoaded = true;
+        }
        this.isLoadingTransactions = false;

        if (!this.showBalancePeriod()) {
--- a/frontend/src/app/components/app/app.component.ts
+++ b/frontend/src/app/components/app/app.component.ts
@@ -4,6 +4,8 @@ import { Router, NavigationEnd } from '@angular/router';
 import { StateService } from '../../services/state.service';
 import { OpenGraphService } from '../../services/opengraph.service';
 import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
+import { ThemeService } from '../../services/theme.service';
+import { SeoService } from '../../services/seo.service';

@Component({
  selector: 'app-root',
@@ -12,12 +14,12 @@ import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
  providers: [NgbTooltipConfig]
 })
 export class AppComponent implements OnInit {
-  link: HTMLElement = document.getElementById('canonical');
-
  constructor(
    public router: Router,
    private stateService: StateService,
    private openGraphService: OpenGraphService,
+    private seoService: SeoService,
+    private themeService: ThemeService,
    private location: Location,
    tooltipConfig: NgbTooltipConfig,
    @Inject(LOCALE_ID) private locale: string,
@@ -52,11 +54,7 @@ export class AppComponent implements OnInit {
  ngOnInit() {
    this.router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
-        let domain = 'mempool.space';
-        if (this.stateService.env.BASE_MODULE === 'liquid') {
-          domain = 'liquid.network';
-        }
-        this.link.setAttribute('href', 'https://' + domain + this.location.path());
+        this.seoService.updateCanonical(this.location.path());
      }
    });
  }
--- 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-fees-subsidy-graph/block-fees-subsidy-graph.component.html
+++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html
@@ -0,0 +1,55 @@
+<app-indexing-progress></app-indexing-progress>
+
+<div class="full-container">
+  <div class="card-header mb-0 mb-md-4">
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-fees-subsidy-subsidy">Block Fees Vs Subsidy</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
+    <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
+          <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 24h
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 432" [class.active]="radioGroupForm.get('dateSpan').value === '3d'">
+          <input type="radio" [value]="'3d'" fragment="3d" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 3D
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 1008" [class.active]="radioGroupForm.get('dateSpan').value === '1w'">
+          <input type="radio" [value]="'1w'" fragment="1w" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 1W
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
+          <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 1M
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 12960" [class.active]="radioGroupForm.get('dateSpan').value === '3m'">
+          <input type="radio" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 3M
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 25920" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
+          <input type="radio" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 6M
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 52560" [class.active]="radioGroupForm.get('dateSpan').value === '1y'">
+          <input type="radio" [value]="'1y'" fragment="1y" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 1Y
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 105120" [class.active]="radioGroupForm.get('dateSpan').value === '2y'">
+          <input type="radio" [value]="'2y'" fragment="2y" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 2Y
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 157680" [class.active]="radioGroupForm.get('dateSpan').value === '3y'">
+          <input type="radio" [value]="'3y'" fragment="3y" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 3Y
+        </label>
+        <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === 'all'">
+          <input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> ALL
+        </label>
+      </div>
+    </form>
+  </div>
+
+  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions" [style]="{opacity: isLoading ? 0.5 : 1}"
+    (chartInit)="onChartInit($event)">
+  </div>
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
+
+</div>
--- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.scss
+++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.scss
@@ -0,0 +1,66 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.full-container {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 15px;
+  width: 100%;
+  height: calc(100vh - 225px);
+  min-height: 400px;
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
+}
+
+.chart {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  padding-bottom: 20px;
+  padding-right: 10px;
+  @media (max-width: 992px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 829px) {
+    padding-bottom: 50px;
+  }
+  @media (max-width: 767px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 629px) {
+    padding-bottom: 55px;
+  }
+  @media (max-width: 567px) {
+    padding-bottom: 55px;
+  }
+}
+.chart-widget {
+  width: 100%;
+  height: 100%;
+  max-height: 270px;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
--- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
+++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
@@ -0,0 +1,510 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
+import { EChartsOption } from '../../graphs/echarts';
+import { Observable } from 'rxjs';
+import { catchError, map, share, startWith, switchMap, tap } from 'rxjs/operators';
+import { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
+import { formatNumber } from '@angular/common';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { download, formatterXAxis } from '../../shared/graphs.utils';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
+import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
+import { StateService } from '../../services/state.service';
+import { MiningService } from '../../services/mining.service';
+import { StorageService } from '../../services/storage.service';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+
+@Component({
+  selector: 'app-block-fees-subsidy-graph',
+  templateUrl: './block-fees-subsidy-graph.component.html',
+  styleUrls: ['./block-fees-subsidy-graph.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockFeesSubsidyGraphComponent implements OnInit {
+  @Input() right: number | string = 45;
+  @Input() left: number | string = 75;
+
+  miningWindowPreference: string;
+  radioGroupForm: UntypedFormGroup;
+
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+
+  statsObservable$: Observable<any>;
+  data: any;
+  subsidies: { [key: number]: number } = {};
+  isLoading = true;
+  formatNumber = formatNumber;
+  timespan = '';
+  chartInstance: any = undefined;
+  showFiat = false;
+  updateZoom = false;
+  zoomSpan = 100;
+  zoomTimeSpan = '';
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private seoService: SeoService,
+    private apiService: ApiService,
+    private formBuilder: UntypedFormBuilder,
+    public stateService: StateService,
+    private storageService: StorageService,
+    private miningService: MiningService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private zone: NgZone,
+    private fiatShortenerPipe: FiatShortenerPipe,
+    private fiatCurrencyPipe: FiatCurrencyPipe,
+    private cd: ChangeDetectorRef,
+  ) {
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
+    this.radioGroupForm.controls.dateSpan.setValue('1y');
+
+    this.subsidies = this.initSubsidies();
+  }
+
+  ngOnInit(): void {
+    this.seoService.setTitle($localize`:@@mining.block-fees-subsidy:Block Fees Vs Subsidy`);
+    this.seoService.setDescription($localize`:@@meta.description.bitcoin.graphs.block-fees-subsidy:See the mining fees earned per Bitcoin block compared to the Bitcoin block subsidy, visualized in BTC and USD over time.`);
+
+    this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
+    this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
+
+    this.route
+    .fragment
+    .subscribe((fragment) => {
+      if (['24h', '3d', '1w', '1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
+        this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
+      }
+    });
+
+    this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
+      .pipe(
+        startWith(this.radioGroupForm.controls.dateSpan.value),
+        switchMap((timespan) => {
+          this.isLoading = true;
+          this.storageService.setValue('miningWindowPreference', timespan);
+          this.timespan = timespan;
+          this.zoomTimeSpan = timespan;
+          this.isLoading = true;
+          return this.apiService.getHistoricalBlockFees$(timespan)
+            .pipe(
+              tap((response) => {
+                this.data = {
+                  timestamp: response.body.map(val => val.timestamp * 1000),
+                  blockHeight: response.body.map(val => val.avgHeight),
+                  blockFees: response.body.map(val => val.avgFees / 100_000_000),
+                  blockFeesFiat: response.body.filter(val => val['USD'] > 0).map(val => val.avgFees / 100_000_000 * val['USD']),
+                  blockSubsidy: response.body.map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000),
+                  blockSubsidyFiat: response.body.filter(val => val['USD'] > 0).map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000 * val['USD']),
+                };
+                
+                this.prepareChartOptions();
+                this.isLoading = false;
+              }),
+              map((response) => {
+                return {
+                  blockCount: parseInt(response.headers.get('x-total-count'), 10),
+                };
+              }),
+            );
+        }),
+        share()
+      );
+  }
+
+  prepareChartOptions() {
+    let title: object;
+    if (this.data.blockFees.length === 0) {
+      title = {
+        textStyle: {
+          color: 'grey',
+          fontSize: 15
+        },
+        text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`,
+        left: 'center',
+        top: 'center'
+      };
+    }
+
+    this.chartOptions = {
+      title: title,
+      color: [
+        '#ff9f00',
+        '#0aab2f',
+      ],
+      animation: false,
+      grid: {
+        top: 80,
+        bottom: 80,
+        right: this.right,
+        left: this.left,
+      },
+      tooltip: {
+        show: !this.isMobile(),
+        trigger: 'axis',
+        axisPointer: {
+          type: 'line'
+        },
+        backgroundColor: 'color-mix(in srgb, var(--active-bg) 95%, transparent)',
+        borderRadius: 4,
+        shadowColor: 'color-mix(in srgb, var(--active-bg) 95%, transparent)',
+        textStyle: {
+          color: 'var(--tooltip-grey)',
+          align: 'left',
+        },
+        borderColor: 'var(--active-bg)',
+        formatter: function (data) {
+          if (data.length <= 0) {
+            return '';
+          }
+          let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.zoomTimeSpan, parseInt(this.data.timestamp[data[0].dataIndex], 10))}</b><br>`;
+          for (let i = data.length - 1; i >= 0; i--) {
+            const tick = data[i];
+            if (!this.showFiat) tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data, this.locale, '1.0-3')} BTC<br>`;
+            else tooltip += `${tick.marker} ${tick.seriesName}: ${this.fiatCurrencyPipe.transform(tick.data, null, 'USD') }<br>`;
+          }
+          if (!this.showFiat) tooltip += `<div style="margin-left: 2px">${formatNumber(data.reduce((acc, val) => acc + val.data, 0), this.locale, '1.0-3')} BTC</div>`;
+          else tooltip += `<div style="margin-left: 2px">${this.fiatCurrencyPipe.transform(data.reduce((acc, val) => acc + val.data, 0), null, 'USD')}</div>`;
+          if (['24h', '3d'].includes(this.zoomTimeSpan)) {
+            tooltip += `<small>` + $localize`At block <b style="color: white; margin-left: 2px">${data[0].axisValue}` + `</small>`;
+          } else {
+            tooltip += `<small>` + $localize`Around block <b style="color: white; margin-left: 2px">${data[0].axisValue}` + `</small>`;
+          }
+          return tooltip;
+        }.bind(this)
+      },
+      xAxis: this.data.blockFees.length === 0 ? undefined : [
+        {
+          type: 'category',
+          data: this.data.blockHeight,
+          show: false,
+          axisLabel: {
+            hideOverlap: true,
+          }
+        },
+        {
+          type: 'category',
+          data: this.data.timestamp,
+          show: true,
+          position: 'bottom',
+          axisLabel: {
+            color: 'var(--grey)',
+            formatter: (val) => {
+              return formatterXAxis(this.locale, this.timespan, parseInt(val, 10));
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        }
+      ],
+      legend: this.data.blockFees.length === 0 ? undefined : {
+        data: [
+          {
+            name: 'Subsidy',
+            inactiveColor: 'var(--grey)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Fees',
+            inactiveColor: 'var(--grey)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Subsidy (USD)',
+            inactiveColor: 'var(--grey)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Fees (USD)',
+            inactiveColor: 'var(--grey)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+        ],
+        selected: {
+          'Subsidy (USD)': this.showFiat,
+          'Fees (USD)': this.showFiat,
+          'Subsidy': !this.showFiat,
+          'Fees': !this.showFiat,
+        },
+      },
+      yAxis: this.data.blockFees.length === 0 ? undefined : [
+        {
+          type: 'value',
+          axisLabel: {
+            color: 'var(--grey)',
+            formatter: (val) => {
+              return `${val} BTC`;
+            }
+          },
+          min: 0,
+          splitLine: {
+            lineStyle: {
+              type: 'dotted',
+              color: 'var(--transparent-fg)',
+              opacity: 0.25,
+            }
+          },
+        },
+        {
+          type: 'value',
+          position: 'right',
+          axisLabel: {
+            color: 'var(--grey)',
+            formatter: function(val) {
+              return this.fiatShortenerPipe.transform(val, null, 'USD');
+            }.bind(this)
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+      ],
+      series: this.data.blockFees.length === 0 ? undefined : [
+        {
+          name: 'Subsidy',
+          yAxisIndex: 0,
+          type: 'bar',
+          stack: 'total',
+          data: this.data.blockSubsidy,
+        },
+        {
+          name: 'Fees',
+          yAxisIndex: 0,
+          type: 'bar',
+          stack: 'total',
+          data: this.data.blockFees,
+        },
+        {
+          name: 'Subsidy (USD)',
+          yAxisIndex: 1,
+          type: 'bar',
+          stack: 'total',
+          data: this.data.blockSubsidyFiat,
+        },
+        {
+          name: 'Fees (USD)',
+          yAxisIndex: 1,
+          type: 'bar',
+          stack: 'total',
+          data: this.data.blockFeesFiat,
+        },
+      ],
+      dataZoom: this.data.blockFees.length === 0 ? undefined : [{
+        type: 'inside',
+        realtime: true,
+        zoomLock: true,
+        maxSpan: 100,
+        minSpan: 1,
+        moveOnMouseMove: false,
+      }, {
+        showDetail: false,
+        show: true,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        left: 20,
+        right: 15,
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+        },
+      }],
+    };
+  }
+
+  onChartInit(ec) {
+    this.chartInstance = ec;
+
+    this.chartInstance.on('legendselectchanged', (params) => {
+      const isFiat = params.name.includes('USD');
+      if (isFiat === this.showFiat) return;
+
+      const isActivation = params.selected[params.name];
+      if (isFiat === isActivation) {
+        this.showFiat = true;
+        this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Subsidy' });
+        this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees' });
+        this.chartInstance.dispatchAction({ type: 'legendSelect',   name: 'Subsidy (USD)' });
+        this.chartInstance.dispatchAction({ type: 'legendSelect',   name: 'Fees (USD)' });
+      } else {
+        this.showFiat = false;
+        this.chartInstance.dispatchAction({ type: 'legendSelect',   name: 'Subsidy' });
+        this.chartInstance.dispatchAction({ type: 'legendSelect',   name: 'Fees' });
+        this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Subsidy (USD)' });
+        this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees (USD)' });
+      }
+    });
+
+    this.chartInstance.on('datazoom', (params) => {
+      if (params.silent || this.isLoading || ['24h', '3d'].includes(this.timespan)) {
+        return;
+      }
+      this.updateZoom = true;
+    });
+
+    this.chartInstance.on('click', (e) => {
+      this.zone.run(() => {
+        if (['24h', '3d'].includes(this.zoomTimeSpan)) {
+          const url = new RelativeUrlPipe(this.stateService).transform(`/block/${e.name}`);
+          if (e.event.event.shiftKey || e.event.event.ctrlKey || e.event.event.metaKey) {
+            window.open(url);
+          } else {
+            this.router.navigate([url]);
+          }
+        }
+      });
+    });
+  }
+
+  @HostListener('document:pointerup', ['$event'])
+  onPointerUp(event: PointerEvent) {
+    if (this.updateZoom) {
+      this.onZoom();
+      this.updateZoom = false;
+    }
+  }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
+
+  initSubsidies(): { [key: number]: number } {
+    let blockReward = 50 * 100_000_000;
+    const subsidies = {};
+    for (let i = 0; i <= 33; i++) {
+      subsidies[i] = blockReward;
+      blockReward = Math.floor(blockReward / 2);
+    }
+    return subsidies;
+  }
+
+  onZoom() {
+    const option = this.chartInstance.getOption();
+    const timestamps = option.xAxis[1].data;
+    const startTimestamp = timestamps[option.dataZoom[0].startValue];
+    const endTimestamp = timestamps[option.dataZoom[0].endValue];
+
+    this.isLoading = true;
+    this.cd.detectChanges();
+
+    const subscription = this.apiService.getBlockFeesFromTimespan$(Math.floor(startTimestamp / 1000), Math.floor(endTimestamp / 1000))
+    .pipe(
+      tap((response) => {
+        const startIndex = option.dataZoom[0].startValue;
+        const endIndex = option.dataZoom[0].endValue;
+        
+        // Update series with more granular data
+        const lengthBefore = this.data.timestamp.length;
+        this.data.timestamp.splice(startIndex, endIndex - startIndex, ...response.body.map(val => val.timestamp * 1000));
+        this.data.blockHeight.splice(startIndex, endIndex - startIndex, ...response.body.map(val => val.avgHeight));
+        this.data.blockFees.splice(startIndex, endIndex - startIndex, ...response.body.map(val => val.avgFees / 100_000_000));
+        this.data.blockFeesFiat.splice(startIndex, endIndex - startIndex, ...response.body.filter(val => val['USD'] > 0).map(val => val.avgFees / 100_000_000 * val['USD']));
+        this.data.blockSubsidy.splice(startIndex, endIndex - startIndex, ...response.body.map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000));
+        this.data.blockSubsidyFiat.splice(startIndex, endIndex - startIndex, ...response.body.filter(val => val['USD'] > 0).map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000 * val['USD']));
+        option.series[0].data = this.data.blockSubsidy;
+        option.series[1].data = this.data.blockFees;
+        option.series[2].data = this.data.blockSubsidyFiat;
+        option.series[3].data = this.data.blockFeesFiat;
+        option.xAxis[0].data = this.data.blockHeight;
+        option.xAxis[1].data = this.data.timestamp;
+        this.chartInstance.setOption(option, true);
+        const lengthAfter = this.data.timestamp.length;
+
+        // Update the zoom to keep the same range after the update
+        this.chartInstance.dispatchAction({
+          type: 'dataZoom',
+          startValue: startIndex,
+          endValue: endIndex + lengthAfter - lengthBefore,
+          silent: true,
+        });
+
+        // Update the chart
+        const newOption = this.chartInstance.getOption();
+        this.zoomSpan = newOption.dataZoom[0].end - newOption.dataZoom[0].start;
+        this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(this.data.timestamp[newOption.dataZoom[0].startValue] / 1000), Math.floor(this.data.timestamp[newOption.dataZoom[0].endValue] / 1000));
+        this.isLoading = false;
+      }),
+      catchError(() => {
+        const newOption = this.chartInstance.getOption();
+        this.zoomSpan = newOption.dataZoom[0].end - newOption.dataZoom[0].start;
+        this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(this.data.timestamp[newOption.dataZoom[0].startValue] / 1000), Math.floor(this.data.timestamp[newOption.dataZoom[0].endValue] / 1000));
+        this.isLoading = false;
+        this.cd.detectChanges();
+        return [];
+      })
+    ).subscribe(() => {
+      subscription.unsubscribe();
+      this.cd.detectChanges();
+    });
+  }
+
+  getTimeRangeFromTimespan(from: number, to: number): string {
+    const timespan = to - from; 
+    switch (true) {
+      case timespan >= 3600 * 24 * 365 * 4: return 'all';
+      case timespan >= 3600 * 24 * 365 * 3: return '4y';
+      case timespan >= 3600 * 24 * 365 * 2: return '3y';
+      case timespan >= 3600 * 24 * 365: return '2y';
+      case timespan >= 3600 * 24 * 30 * 6: return '1y';
+      case timespan >= 3600 * 24 * 30 * 3: return '6m';
+      case timespan >= 3600 * 24 * 30: return '3m';
+      case timespan >= 3600 * 24 * 7: return '1m';
+      case timespan >= 3600 * 24 * 3: return '1w';
+      case timespan >= 3600 * 24: return '3d';
+      default: return '24h';
+    }
+  }
+
+  onSaveChart() {
+    // @ts-ignore
+    const prevBottom = this.chartOptions.grid.bottom;
+    const now = new Date();
+    // @ts-ignore
+    this.chartOptions.grid.bottom = 40;
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
+    this.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `block-fees-subsidy-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
+    // @ts-ignore
+    this.chartOptions.grid.bottom = prevBottom;
+    this.chartOptions.backgroundColor = 'none';
+    this.chartInstance.setOption(this.chartOptions);
+  }
+
+}
--- a/frontend/src/app/components/block/block-preview.component.ts
+++ b/frontend/src/app/components/block/block-preview.component.ts
@@ -136,7 +136,12 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
                  return of(transactions);
                })
              ),
-            this.stateService.env.ACCELERATOR === true && block.height > 819500 ? this.servicesApiService.getAccelerationHistory$({ blockHeight: block.height }) : of([])
+            this.stateService.env.ACCELERATOR === true && block.height > 819500
+              ? this.servicesApiService.getAccelerationHistory$({ blockHeight: block.height })
+                .pipe(catchError(() => {
+                  return of([]);
+                }))
+              : of([])
          ]);
        }
      ),
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -345,7 +345,12 @@ export class BlockComponent implements OnInit, OnDestroy {
                return of(null);
              })
            ),
-          this.stateService.env.ACCELERATOR === true && block.height > 819500 ? this.servicesApiService.getAccelerationHistory$({ blockHeight: block.height }) : of([])
+          this.stateService.env.ACCELERATOR === true && block.height > 819500
+            ? this.servicesApiService.getAccelerationHistory$({ blockHeight: block.height })
+              .pipe(catchError(() => {
+                return of([]);
+              }))
+            : of([])
        ]);
      })
    )
--- a/frontend/src/app/components/graphs/graphs.component.html
+++ b/frontend/src/app/components/graphs/graphs.component.html
@@ -1,9 +1,9 @@
-<div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING" class="mb-3 d-flex menu">
+<div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING || stateService.env.ACCELERATOR" class="mb-3 d-flex menu" [style]="{'flex-wrap': flexWrap ? 'wrap' : ''}">

-  <a routerLinkActive="active" class="btn btn-primary" [class]="padding"
+  <a routerLinkActive="active" class="btn btn-primary w-33"
    [routerLink]="['/graphs/mempool' | relativeUrl]">Mempool</a>

-  <div ngbDropdown [class]="padding" *ngIf="stateService.env.MINING_DASHBOARD">
+  <div ngbDropdown class="w-33" *ngIf="stateService.env.MINING_DASHBOARD">
    <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="mining">Mining</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/pools' | relativeUrl]"
@@ -17,6 +17,8 @@
        i18n="mining.block-fee-rates">Block Fee Rates</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]"
        i18n="mining.block-fees">Block Fees</a>
+      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]"
+        i18n="mining.block-fees">Block Fees Vs Subsidy</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]"
        i18n="mining.block-rewards">Block Rewards</a>
      <a class="dropdown-item" routerLinkActive="active"
@@ -26,7 +28,7 @@
    </div>
  </div>

-  <div ngbDropdown [class]="padding" *ngIf="stateService.env.LIGHTNING">
+  <div ngbDropdown class="w-33" *ngIf="stateService.env.LIGHTNING">
    <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="lightning">Lightning</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]"
@@ -43,6 +45,14 @@
        i18n="lightning.nodes-channels-world-map">Lightning Nodes Channels World Map</a>
    </div>
  </div>
+
+  <div ngbDropdown class="w-33" *ngIf="stateService.env.ACCELERATOR">
+    <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="accelerator.accelerations">Accelerations</button>
+    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]"
+        i18n="accelerator.acceleration-fees">Acceleration Fees</a>
+    </div>
+  </div>
 </div>

 <router-outlet></router-outlet>
--- a/frontend/src/app/components/graphs/graphs.component.scss
+++ b/frontend/src/app/components/graphs/graphs.component.scss
@@ -2,7 +2,7 @@
  flex-grow: 1;
  padding: 0 35px;
  @media (min-width: 576px) {
-    max-width: 400px;
+    max-width: 600px;
  }

  & > * {
@@ -11,5 +11,6 @@
    &.last-child {
      margin-inline-end: 0;
    }
+    margin-bottom: 5px;
  }
 }
--- a/frontend/src/app/components/graphs/graphs.component.ts
+++ b/frontend/src/app/components/graphs/graphs.component.ts
@@ -8,7 +8,7 @@ import { WebsocketService } from '../../services/websocket.service';
  styleUrls: ['./graphs.component.scss'],
 })
 export class GraphsComponent implements OnInit {
-  padding = 'w-50';
+  flexWrap = false;

  constructor(
    public stateService: StateService,
@@ -18,8 +18,8 @@ export class GraphsComponent implements OnInit {
  ngOnInit(): void {
    this.websocketService.want(['blocks']);

-    if (this.stateService.env.MINING_DASHBOARD === true && this.stateService.env.LIGHTNING === true) {
-      this.padding = 'w-33';
+    if (this.stateService.env.ACCELERATOR === true && (this.stateService.env.MINING_DASHBOARD === true || this.stateService.env.LIGHTNING === true)) {
+      this.flexWrap = true;
    }
  }
 }
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -53,7 +53,7 @@
  }
 }
 .formRadioGroup.mining {
-  @media (min-width: 1035px) {
+  @media (min-width: 1200px) {
    position: relative;
    top: -100px;
  }
--- 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/twitter-widget/twitter-widget.component.ts
+++ b/frontend/src/app/components/twitter-widget/twitter-widget.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy, SecurityContext } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, SecurityContext, SimpleChanges, OnChanges } from '@angular/core';
 import { LanguageService } from '../../services/language.service';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@@ -8,7 +8,7 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  styleUrls: ['./twitter-widget.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TwitterWidgetComponent {
+export class TwitterWidgetComponent implements OnChanges {
  @Input() handle: string;
  @Input() width = 300;
  @Input() height = 400;
@@ -27,38 +27,44 @@ export class TwitterWidgetComponent {
    this.setIframeSrc();
  }

+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.handle) {
+      this.setIframeSrc();
+    }
+  }
+
  setIframeSrc(): void {
-    this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.sanitizer.sanitize(SecurityContext.URL,
-      'https://syndication.twitter.com/srv/timeline-profile/screen-name/bitcoinofficesv?creatorScreenName=mempool'
-      + '&dnt=true'
-      + '&embedId=twitter-widget-0'
-      + '&features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%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'
-    ));
+    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 {
-    console.log('ready!');
    this.loading = false;
    this.error = false;
  }

  onFailed(): void {
-    console.log('failed!')
    this.loading = false;
    this.error = true;
  }
--- a/frontend/src/app/graphs/graphs.module.ts
+++ b/frontend/src/app/graphs/graphs.module.ts
@@ -5,6 +5,7 @@ import { SharedModule } from '../shared/shared.module';

 import { AccelerationFeesGraphComponent } from '../components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component';
 import { BlockFeesGraphComponent } from '../components/block-fees-graph/block-fees-graph.component';
+import { BlockFeesSubsidyGraphComponent } from '../components/block-fees-subsidy-graph/block-fees-subsidy-graph.component';
 import { BlockRewardsGraphComponent } from '../components/block-rewards-graph/block-rewards-graph.component';
 import { BlockFeeRatesGraphComponent } from '../components/block-fee-rates-graph/block-fee-rates-graph.component';
 import { BlockSizesWeightsGraphComponent } from '../components/block-sizes-weights-graph/block-sizes-weights-graph.component';
@@ -54,6 +55,7 @@ import { CommonModule } from '@angular/common';
    GraphsComponent,
    AccelerationFeesGraphComponent,
    BlockFeesGraphComponent,
+    BlockFeesSubsidyGraphComponent,
    BlockRewardsGraphComponent,
    BlockFeeRatesGraphComponent,
    BlockSizesWeightsGraphComponent,
--- a/frontend/src/app/graphs/graphs.routing.module.ts
+++ b/frontend/src/app/graphs/graphs.routing.module.ts
@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { BlockHealthGraphComponent } from '../components/block-health-graph/block-health-graph.component';
 import { BlockFeeRatesGraphComponent } from '../components/block-fee-rates-graph/block-fee-rates-graph.component';
 import { BlockFeesGraphComponent } from '../components/block-fees-graph/block-fees-graph.component';
+import { BlockFeesSubsidyGraphComponent } from '../components/block-fees-subsidy-graph/block-fees-subsidy-graph.component';
 import { BlockRewardsGraphComponent } from '../components/block-rewards-graph/block-rewards-graph.component';
 import { BlockSizesWeightsGraphComponent } from '../components/block-sizes-weights-graph/block-sizes-weights-graph.component';
 import { GraphsComponent } from '../components/graphs/graphs.component';
@@ -113,6 +114,11 @@ const routes: Routes = [
            data: { networks: ['bitcoin'] },
            component: BlockFeesGraphComponent,
          },
+          {
+            path: 'mining/block-fees-subsidy',
+            data: { networks: ['bitcoin'] },
+            component: BlockFeesSubsidyGraphComponent,
+          },
          {
            path: 'mining/block-rewards',
            data: { networks: ['bitcoin'] },
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -333,6 +333,12 @@ export class ApiService {
    );
  }

+  getBlockFeesFromTimespan$(from: number, to: number): Observable<any> {
+    return this.httpClient.get<any[]>(
+      this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/fees?from=${from}&to=${to}`, { observe: 'response' }
+    );
+  }
+
  getHistoricalBlockRewards$(interval: string | undefined) : Observable<any> {
    return this.httpClient.get<any[]>(
      this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/rewards` +
--- a/frontend/src/app/services/seo.service.ts
+++ b/frontend/src/app/services/seo.service.ts
@@ -11,8 +11,9 @@ export class SeoService {
  network = '';
  baseTitle = 'mempool';
  baseDescription = 'Explore the full Bitcoin ecosystem&reg; with The Mempool Open Source Project&reg;.';
+  baseDomain = 'mempool.space';

-  canonicalLink: HTMLElement = document.getElementById('canonical');
+  canonicalLink: HTMLLinkElement = document.getElementById('canonical') as HTMLLinkElement;

  constructor(
    private titleService: Title,
@@ -21,6 +22,16 @@ export class SeoService {
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) {
+    // save original meta tags
+    this.baseDescription = metaService.getTag('name=\'description\'')?.content || this.baseDescription;
+    this.baseTitle = titleService.getTitle()?.split(' - ')?.[0] || this.baseTitle;
+    try {
+      const canonicalUrl = new URL(this.canonicalLink?.href || '');
+      this.baseDomain = canonicalUrl?.host;
+    } catch (e) {
+      // leave as default
+    }
+
    this.stateService.networkChanged$.subscribe((network) => this.network = network);
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
@@ -72,11 +83,7 @@ export class SeoService {
  }

  updateCanonical(path) {
-    let domain = 'mempool.space';
-    if (this.stateService.env.BASE_MODULE === 'liquid') {
-      domain = 'liquid.network';
-    }
-    this.canonicalLink.setAttribute('href', 'https://' + domain + path);
+    this.canonicalLink.setAttribute('href', 'https://' + this.baseDomain + path);
  }

  getTitle(): string {
@@ -94,10 +101,7 @@ export class SeoService {
  }

  getDescription(): string {
-    if ( (this.network === 'testnet') || (this.network === 'testnet4') || (this.network === 'signet') || (this.network === '') || (this.network == 'mainnet') )
-      return this.baseDescription + ' See the real-time status of your transactions, browse network stats, and more.';
-    if ( (this.network === 'liquid') || (this.network === 'liquidtestnet') )
-      return this.baseDescription + ' See Liquid transactions & assets, get network info, and more.';
+    return this.baseDescription;
  }

  ucfirst(str: string) {
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -102,7 +102,7 @@
    <div class="row social-links">
      <div class="col-sm-12">
        <a href="https://github.com/mempool" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>
-        <a href="https://twitter.com/mempool" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg></a>
+        <a href="https://twitter.com/mempool" target="_blank"><svg width="20" height="20" style="width: 17px" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/></svg></a>
        <a href="nostr:npub18d4r6wanxkyrdfjdrjqzj2ukua5cas669ew2g5w7lf4a8te7awzqey6lt3" target="_blank"><svg fill="#fff" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 875 875"><path d="M684.72 485.57c.22 12.59-11.93 51.47-38.67 81.3-26.74 29.83-56.02 20.85-58.42 20.16s-3.09-4.46-7.89-3.77-9.6 6.17-18.86 7.2-17.49 1.71-26.06-1.37c-4.46.69-5.14.71-7.2 2.24s-17.83 10.79-21.6 11.47c0 7.2-1.37 44.57 0 55.89s3.77 25.71 7.54 36 2.74 10.63 7.54 9.94 13.37.34 15.77 4.11c2.4 3.77 1.37 6.51 5.49 8.23s60.69 17.14 99.43 19.2c26.74.69 42.86 2.74 52.12 19.54 1.37 7.89 7.54 13.03 11.31 14.06s8.23 2.06 12 5.83 1.03 8.23 5.49 11.66c4.46 3.43 14.74 8.57 25.37 13.71 10.63 5.14 15.09 13.37 15.77 16.11s1.71 10.97 1.71 10.97-8.91 0-10.97-2.06-2.74-5.83-2.74-5.83-6.17 1.03-7.54 3.43.69 2.74-7.89.69-11.66-3.77-18.17-8.57c-6.51-4.8-16.46-17.14-25.03-16.8 4.11 8.23 5.83 8.23 10.63 10.97s8.23 5.83 8.23 5.83l-7.2 4.46s-4.46 2.06-14.74-.69-11.66-4.46-12.69-10.63 0-9.26-2.74-14.4-4.11-15.77-22.29-21.26c-18.17-5.49-66.52-21.26-100.12-24.69s-22.63-2.74-28.11-1.37-15.77 4.46-26.4-1.37c-10.63-5.83-16.8-13.71-17.49-20.23s-1.71-10.97 0-19.2 3.43-19.89 1.71-26.74-14.06-55.89-19.89-64.12c-13.03 1.03-50.74-.69-50.74-.69s-2.4-.69-17.49 5.83-36.48 13.76-46.77 19.93-14.4 9.7-16.12 13.13c.12 3-1.23 7.72-2.79 9.06s-12.48 2.42-12.48 2.42-5.85 5.86-8.25 9.97c-6.86 9.6-55.2 125.14-66.52 149.83-13.54 32.57-9.77 27.43-37.71 27.43s-8.06.3-8.06.3-12.34 5.88-16.8 5.88-18.86-2.4-26.4 0-16.46 9.26-23.31 10.29-4.95-1.34-8.38-3.74c-4-.21-14.27-.12-14.27-.12s1.74-6.51 7.91-10.88c8.23-5.83 25.37-16.11 34.63-21.26s17.49-7.89 23.31-9.26 18.51-6.17 30.51-9.94 19.54-8.23 29.83-31.54 50.4-111.43 51.43-116.23c.63-2.96 3.73-6.48 4.8-15.09.66-5.35-2.49-13.04 1.71-22.63 10.97-25.03 21.6-20.23 26.4-20.23s17.14.34 26.4-1.37 15.43-2.74 24.69-7.89 11.31-8.91 11.31-8.91l-19.89-3.43s-18.51.69-25.03-4.46-15.43-15.77-15.43-15.77l-7.54-7.2 1.03 8.57s-5.14-8.91-6.51-10.29-8.57-6.51-11.31-11.31-7.54-25.03-7.54-25.03l-6.17 13.03-1.71-18.86-5.14 7.2-2.74-16.11-4.8 8.23-3.43-14.4-5.83 4.46-2.4-10.29-5.83-3.43s-14.06-9.26-16.46-9.6-4.46 3.43-4.46 3.43l1.37 12-12.2-6.27-7-11.9s2.36 4.01-9.62 7.53c-20.55 0-21.89-2.28-24.93-3.94-1.31-6.56-5.57-10.11-5.57-10.11h-20.57l-.34-6.86-7.89 3.09.69-10.29h-14.06l1.03-11.31h-8.91s3.09-9.26 25.71-22.97 25.03-16.46 46.29-17.14c21.26-.69 32.91 2.74 46.29 8.23s38.74 13.71 43.89 17.49c11.31-9.94 28.46-19.89 34.29-19.89 1.03-2.4 6.19-12.33 17.96-17.6 35.31-15.81 108.13-34 131.53-35.54 31.2-2.06 7.89-1.37 39.09 2.06 31.2 3.43 54.17 7.54 69.6 12.69 12.58 4.19 25.03 9.6 34.29 2.06 4.33-1.81 11.81-1.34 17.83-5.14 30.69-25.09 34.72-32.35 43.63-41.95s20.14-24.91 22.54-45.14 4.46-58.29-10.63-88.12-28.8-45.26-34.63-69.26c-5.83-24-8.23-61.03-6.17-73.03 2.06-12 5.14-22.29 6.86-30.51s9.94-14.74 19.89-16.46c9.94-1.71 17.83 1.37 22.29 4.8 4.46 3.43 11.65 6.28 13.37 10.29.34 1.71-1.37 6.51 8.23 8.23 9.6 1.71 16.05 4.16 16.05 4.16s15.64 4.29 3.11 7.73c-12.69 2.06-20.52-.71-24.29 1.69s-7.21 10.08-9.61 11.1-7.2.34-12 4.11-9.6 6.86-12.69 14.4-5.49 15.77-3.43 26.74 8.57 31.54 14.4 43.2c5.83 11.66 20.23 40.8 24.34 47.66s15.77 29.49 16.8 53.83 1.03 44.23 0 54.86-10.84 51.65-35.53 85.94c-8.16 14.14-23.21 31.9-24.67 35.03-1.45 3.13-3.02 4.88-1.61 7.65 4.62 9.05 12.87 22.13 14.71 29.22 2.29 6.64 6.99 16.13 7.22 28.72Z" style="stroke:#000;stroke-miterlimit:10;stroke-width:6px"/></svg></a>
        <a href="https://primal.net/mempool" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" ><path d="m155.5 253c-8.9 2-18.1 3-27.5 3-25.9 0-50-7.7-70.2-20.9-5-7.2-7.2-11.1-8.9-14-0.8-1.4-1.5-2.6-2.2-3.8-7.7-12.2-11.7-28-12.5-46.6-2.7-57.4 32.2-94 67.8-100.1 22.6-3.8 40.6 0.1 54.3 7.5-12.1-3.4-26.6-3.6-43.2 1.1-40.1 12.9-53.5 52.3-47.8 95.8 10 54.6 63.5 74.1 90.2 78zm-114.3-30.9c-7.4-13.2-14.2-33-15-51-2.9-60.9 34.4-101.6 74.5-108.3 54.7-9.3 85.1 23.1 95.6 47.1 0.4-0.3 0.6-0.9 0.3-1.4-17.2-37.4-52.8-63.2-94-63.2-46.8 0-88.5 33.6-102.6 83.4 0.2 36.9 16 70.2 41.2 93.4zm158.8 11.7c-9.2 6.3-19.3 11.5-30.1 15.2-5.1-0.9-10.9-2-14.9-2.8-1.9-0.4-3.4-0.7-4.3-0.9-24.4-4.4-67.9-20.1-77.5-71.6-2.6-20.6-0.7-39.7 6.1-54.8 6.7-14.9 18.4-26.3 36.1-32 20.6-5.6 37.7-2.9 50.3 3.9q-4.7-0.9-9.6-1c-27.4 0-49.7 23.9-49.7 53.3 0 11.7 3.6 22.5 9.6 31.3 0 0 17.2 32.5 64 29.6 41.7-2.6 63.4-40 66-53.8 1.3-7.2 2-14.6 2-22.2 0-66.3-53.7-120-120-120-50.1 0-93.1 30.8-111.1 74.4-6 7.9-11.2 16.7-15.4 26.2 9.3-61.5 62.4-108.6 126.5-108.6 70.7 0 128 57.3 128 128 0 44-22.2 82.8-56 105.8z" style="fill:#ffffff"/></svg></a>
        <a href="https://youtube.com/@mempool" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></a>