Merge remote-tracking branch 'origin/master' into feature/nymkappa/block-audit-page

frontend/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { SharedModule } from './shared/shared.module';
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 import { LanguageService } from './services/language.service';
+import { FiatShortenerPipe } from './shared/pipes/fiat-shortener.pipe';
 import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
 import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
 
@@ -37,6 +38,7 @@ import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe
     StorageService,
     LanguageService,
     ShortenStringPipe,
+    FiatShortenerPipe,
     CapAddressPipe,
     { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
   ],

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

@@ -2,7 +2,7 @@
 
   <div class="intro">
     <span style="margin-left: auto; margin-right: -20px; margin-bottom: -20px">&trade;</span>
-    <img class="logo" src="./resources/mempool-logo-bigger.png" />
+    <img class="logo" src="/resources/mempool-logo-bigger.png" />
     <div class="version">
       v{{ packetJsonVersion }} [<a href="https://github.com/mempool/mempool/commit/{{ frontendGitCommitHash }}">{{ frontendGitCommitHash }}</a>]
     </div>

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

@@ -2,7 +2,7 @@
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
     <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
-      <img src="./resources/bisq/bisq-markets-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">
+      <img src="/resources/bisq/bisq-markets-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">
       <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>
@@ -12,16 +12,16 @@
 
   <div ngbDropdown (window:resize)="onResize($event)" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
     <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <img src="./resources/bisq-logo.png" style="width: 25px; height: 25px;" class="mr-1">
+      <img src="/resources/bisq-logo.png" style="width: 25px; height: 25px;" class="mr-1">
     </button>
     <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
-      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
-      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/signet'" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
-      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
+      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><img src="/resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
+      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/signet'" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="/resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
+      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="/resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
       <h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
-      <a ngbDropdownItem class="mainnet active" routerLink="/"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
-      <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</a>
-      <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet"><img src="./resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1"> Liquid Testnet</a>
+      <a ngbDropdownItem class="mainnet active" routerLink="/"><img src="/resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
+      <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid"><img src="/resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</a>
+      <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1"> Liquid Testnet</a>
     </div>
   </div>
 

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts

@@ -180,8 +180,8 @@ export class BlockFeeRatesGraphComponent implements OnInit {
           }
           let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
 
-          for (const pool of data.reverse()) {
-            tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1]} sats/vByte<br>`;
+          for (const rate of data.reverse()) {
+            tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1]} sats/vByte<br>`;
           }
 
           if (['24h', '3d'].includes(this.timespan)) {

frontend/src/app/components/block-fees-graph/block-fees-graph.component.html

@@ -8,15 +8,6 @@
     </button>
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
-          <input ngbButton type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]"> 24h
-        </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 432">
-          <input ngbButton type="radio" [value]="'3d'" fragment="3d" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]"> 3D
-        </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 1008">
-          <input ngbButton type="radio" [value]="'1w'" fragment="1w" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]"> 1W
-        </label>
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
           <input ngbButton type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]"> 1M
         </label>

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

@@ -4,12 +4,13 @@ import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
-import { formatNumber } from '@angular/common';
+import { formatCurrency, formatNumber, getCurrencySymbol } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { download, formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from 'src/app/shared/graphs.utils';
 import { StorageService } from 'src/app/services/storage.service';
 import { MiningService } from 'src/app/services/mining.service';
 import { ActivatedRoute } from '@angular/router';
+import { FiatShortenerPipe } from 'src/app/shared/pipes/fiat-shortener.pipe';
 
 @Component({
   selector: 'app-block-fees-graph',
@@ -51,6 +52,7 @@ export class BlockFeesGraphComponent implements OnInit {
     private storageService: StorageService,
     private miningService: MiningService,
     private route: ActivatedRoute,
+    private fiatShortenerPipe: FiatShortenerPipe,
   ) {
     this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
     this.radioGroupForm.controls.dateSpan.setValue('1y');
@@ -58,14 +60,14 @@ export class BlockFeesGraphComponent implements OnInit {
 
   ngOnInit(): void {
     this.seoService.setTitle($localize`:@@6c453b11fd7bd159ae30bc381f367bc736d86909:Block Fees`);
-    this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
+    this.miningWindowPreference = this.miningService.getDefaultTimespan('1m');
     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) {
+        if (['1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
           this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
         }
       });
@@ -82,6 +84,7 @@ export class BlockFeesGraphComponent implements OnInit {
               tap((response) => {
                 this.prepareChartOptions({
                   blockFees: response.body.map(val => [val.timestamp * 1000, val.avgFees / 100000000, val.avgHeight]),
+                  blockFeesUSD: response.body.filter(val => val.USD > 0).map(val => [val.timestamp * 1000, val.avgFees / 100000000 * val.USD, val.avgHeight]),
                 });
                 this.isLoading = false;
               }),
@@ -97,17 +100,32 @@ export class BlockFeesGraphComponent implements OnInit {
   }
 
   prepareChartOptions(data) {
+    let title: object;
+    if (data.blockFees.length === 0) {
+      title = {
+        textStyle: {
+          color: 'grey',
+          fontSize: 15
+        },
+        text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`,
+        left: 'center',
+        top: 'center'
+      };
+    }
+
     this.chartOptions = {
-      animation: false,
+      title: title,
       color: [
-        new graphic.LinearGradient(0, 0, 0, 0.65, [
-          { offset: 0, color: '#F4511E' },
-          { offset: 0.25, color: '#FB8C00' },
-          { offset: 0.5, color: '#FFB300' },
-          { offset: 0.75, color: '#FDD835' },
-          { offset: 1, color: '#7CB342' }
+        new graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#FDD835' },
+          { offset: 1, color: '#FB8C00' },
+        ]),
+        new graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#C0CA33' },
+          { offset: 1, color: '#1B5E20' },
         ]),
       ],
+      animation: false,
       grid: {
         top: 30,
         bottom: 80,
@@ -128,30 +146,54 @@ export class BlockFeesGraphComponent implements OnInit {
           align: 'left',
         },
         borderColor: '#000',
-        formatter: (ticks) => {
-          let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(ticks[0].axisValue, 10))}</b><br>`;
-          tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1], this.locale, '1.3-3')} BTC`;
-          tooltip += `<br>`;
+        formatter: function (data) {
+          if (data.length <= 0) {
+            return '';
+          }
+          let tooltip = `<b style="color: white; margin-left: 2px">
+            ${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
 
-          if (['24h', '3d'].includes(this.timespan)) {
-            tooltip += `<small>` + $localize`At block: ${ticks[0].data[2]}` + `</small>`;
-          } else {
-            tooltip += `<small>` + $localize`Around block: ${ticks[0].data[2]}` + `</small>`;
+          for (const tick of data) {
+            if (tick.seriesIndex === 0) {
+              tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.3-3')} BTC<br>`;
+            } else if (tick.seriesIndex === 1) {
+              tooltip += `${tick.marker} ${tick.seriesName}: ${formatCurrency(tick.data[1], this.locale, getCurrencySymbol('USD', 'narrow'), 'USD', '1.0-0')}<br>`;
+            }
           }
 
+          tooltip += `<small>* On average around block ${data[0].data[2]}</small>`;
           return tooltip;
-        }
+        }.bind(this)
       },
-      xAxis: {
-        name: formatterXAxisLabel(this.locale, this.timespan),
-        nameLocation: 'middle',
-        nameTextStyle: {
-          padding: [10, 0, 0, 0],
-        },
+      xAxis: data.blockFees.length === 0 ? undefined :
+      {
         type: 'time',
         splitNumber: this.isMobile() ? 5 : 10,
+        axisLabel: {
+          hideOverlap: true,
+        }
       },
-      yAxis: [
+      legend: data.blockFees.length === 0 ? undefined : {
+        data: [
+          {
+            name: 'Fees BTC',
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Fees USD',
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {  
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+        ],
+      },
+      yAxis: data.blockFees.length === 0 ? undefined : [
         {
           type: 'value',
           axisLabel: {
@@ -168,21 +210,51 @@ export class BlockFeesGraphComponent implements OnInit {
             }
           },
         },
-      ],
-      series: [
         {
-          zlevel: 0,
-          name: $localize`:@@c20172223f84462032664d717d739297e5a9e2fe:Fees`,
-          showSymbol: false,
-          symbol: 'none',
-          data: data.blockFees,
-          type: 'line',
-          lineStyle: {
-            width: 2,
+          type: 'value',
+          position: 'right',
+          axisLabel: {
+            color: 'rgb(110, 112, 121)',
+            formatter: function(val) {
+              return this.fiatShortenerPipe.transform(val);
+            }.bind(this)
+          },
+          splitLine: {
+            show: false,
           },
         },
       ],
-      dataZoom: [{
+      series: data.blockFees.length === 0 ? undefined : [
+        {
+          legendHoverLink: false,
+          zlevel: 0,
+          yAxisIndex: 0,
+          name: 'Fees BTC',
+          data: data.blockFees,
+          type: 'line',
+          smooth: 0.25,
+          symbol: 'none',
+          lineStyle: {
+            width: 1,
+            opacity: 1,
+          }
+        },
+        {
+          legendHoverLink: false,
+          zlevel: 1,
+          yAxisIndex: 1,
+          name: 'Fees USD',
+          data: data.blockFeesUSD,
+          type: 'line',
+          smooth: 0.25,
+          symbol: 'none',
+          lineStyle: {
+            width: 2,
+            opacity: 1,
+          }
+        },
+      ],
+      dataZoom: data.blockFees.length === 0 ? undefined : [{
         type: 'inside',
         realtime: true,
         zoomLock: true,

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html

@@ -9,15 +9,6 @@
     </button>
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
-          <input ngbButton type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]"> 24h
-        </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 432">
-          <input ngbButton type="radio" [value]="'3d'" fragment="3d" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]"> 3D
-        </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 1008">
-          <input ngbButton type="radio" [value]="'1w'" fragment="1w" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]"> 1W
-        </label>
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
           <input ngbButton type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]"> 1M
         </label>

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

@@ -4,12 +4,13 @@ import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
-import { formatNumber } from '@angular/common';
+import { formatCurrency, formatNumber, getCurrencySymbol } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { download, formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from 'src/app/shared/graphs.utils';
 import { MiningService } from 'src/app/services/mining.service';
 import { StorageService } from 'src/app/services/storage.service';
 import { ActivatedRoute } from '@angular/router';
+import { FiatShortenerPipe } from 'src/app/shared/pipes/fiat-shortener.pipe';
 
 @Component({
   selector: 'app-block-rewards-graph',
@@ -51,19 +52,20 @@ export class BlockRewardsGraphComponent implements OnInit {
     private miningService: MiningService,
     private storageService: StorageService,
     private route: ActivatedRoute,
+    private fiatShortenerPipe: FiatShortenerPipe,
   ) {
   }
 
   ngOnInit(): void {
     this.seoService.setTitle($localize`:@@8ba8fe810458280a83df7fdf4c614dfc1a826445:Block Rewards`);
-    this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
+    this.miningWindowPreference = this.miningService.getDefaultTimespan('3m');
     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) {
+        if (['3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
           this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
         }
       });
@@ -80,6 +82,7 @@ export class BlockRewardsGraphComponent implements OnInit {
               tap((response) => {
                 this.prepareChartOptions({
                   blockRewards: response.body.map(val => [val.timestamp * 1000, val.avgRewards / 100000000, val.avgHeight]),
+                  blockRewardsUSD: response.body.filter(val => val.USD > 0).map(val => [val.timestamp * 1000, val.avgRewards / 100000000 * val.USD, val.avgHeight]),
                 });
                 this.isLoading = false;
               }),
@@ -95,15 +98,32 @@ export class BlockRewardsGraphComponent implements OnInit {
   }
 
   prepareChartOptions(data) {
+    let title: object;
+    if (data.blockRewards.length === 0) {
+      title = {
+        textStyle: {
+          color: 'grey',
+          fontSize: 15
+        },
+        text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`,
+        left: 'center',
+        top: 'center'
+      };
+    }
+
+    const scaleFactor = 0.1;
+
     this.chartOptions = {
+      title: title,
       animation: false,
       color: [
-        new graphic.LinearGradient(0, 0, 0, 0.65, [
-          { offset: 0, color: '#F4511E' },
-          { offset: 0.25, color: '#FB8C00' },
-          { offset: 0.5, color: '#FFB300' },
-          { offset: 0.75, color: '#FDD835' },
-          { offset: 1, color: '#7CB342' }
+        new graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#FDD835' },
+          { offset: 1, color: '#FB8C00' },
+        ]),
+        new graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#C0CA33' },
+          { offset: 1, color: '#1B5E20' },
         ]),
       ],
       grid: {
@@ -126,33 +146,55 @@ export class BlockRewardsGraphComponent implements OnInit {
           align: 'left',
         },
         borderColor: '#000',
-        formatter: (ticks) => {
-          let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(ticks[0].axisValue, 10))}</b><br>`;
-          tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1], this.locale, '1.3-3')} BTC`;
-          tooltip += `<br>`;
+        formatter: function (data) {
+          if (data.length <= 0) {
+            return '';
+          }
+          let tooltip = `<b style="color: white; margin-left: 2px">
+            ${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
 
-          if (['24h', '3d'].includes(this.timespan)) {
-            tooltip += `<small>` + $localize`At block: ${ticks[0].data[2]}` + `</small>`;
-          } else {
-            tooltip += `<small>` + $localize`Around block: ${ticks[0].data[2]}` + `</small>`;
+          for (const tick of data) {
+            if (tick.seriesIndex === 0) {
+              tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.3-3')} BTC<br>`;
+            } else if (tick.seriesIndex === 1) {
+              tooltip += `${tick.marker} ${tick.seriesName}: ${formatCurrency(tick.data[1], this.locale, getCurrencySymbol('USD', 'narrow'), 'USD', '1.0-0')}<br>`;
+            }
           }
 
+          tooltip += `<small>* On average around block ${data[0].data[2]}</small>`;
           return tooltip;
-        }
+        }.bind(this)
       },
-      xAxis: {
-        name: formatterXAxisLabel(this.locale, this.timespan),
-        nameLocation: 'middle',
-        nameTextStyle: {
-          padding: [10, 0, 0, 0],
-        },
+      xAxis: data.blockRewards.length === 0 ? undefined :
+      {
         type: 'time',
         splitNumber: this.isMobile() ? 5 : 10,
+        axisLabel: {
+          hideOverlap: true,
+        }
       },
-      yAxis: [
+      legend: data.blockRewards.length === 0 ? undefined : {
+        data: [
+          {
+            name: 'Rewards BTC',
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Rewards USD',
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {  
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+        ],
+      },
+      yAxis: data.blockRewards.length === 0 ? undefined : [
         {
-          min: value => Math.round(10 * value.min * 0.99) / 10,
-          max: value => Math.round(10 * value.max * 1.01) / 10,
           type: 'value',
           axisLabel: {
             color: 'rgb(110, 112, 121)',
@@ -160,6 +202,12 @@ export class BlockRewardsGraphComponent implements OnInit {
               return `${val} BTC`;
             }
           },
+          min: (value) => {
+            return Math.round(value.min * (1.0 - scaleFactor) * 10) / 10;
+          },
+          max: (value) => {
+            return Math.round(value.max * (1.0 + scaleFactor) * 10) / 10;
+          },
           splitLine: {
             lineStyle: {
               type: 'dotted',
@@ -168,21 +216,56 @@ export class BlockRewardsGraphComponent implements OnInit {
             }
           },
         },
-      ],
-      series: [
         {
-          zlevel: 0,
-          name: $localize`:@@12f86e6747a5ad39e62d3480ddc472b1aeab5b76:Reward`,
-          showSymbol: false,
-          symbol: 'none',
-          data: data.blockRewards,
-          type: 'line',
-          lineStyle: {
-            width: 2,
+          min: (value) => {
+            return Math.round(value.min * (1.0 - scaleFactor) * 10) / 10;
+          },
+          max: (value) => {
+            return Math.round(value.max * (1.0 + scaleFactor) * 10) / 10;
+          },
+          type: 'value',
+          position: 'right',
+          axisLabel: {
+            color: 'rgb(110, 112, 121)',
+            formatter: function(val) {
+              return this.fiatShortenerPipe.transform(val);
+            }.bind(this)
+          },
+          splitLine: {
+            show: false,
           },
         },
       ],
-      dataZoom: [{
+      series: data.blockRewards.length === 0 ? undefined : [
+        {
+          legendHoverLink: false,
+          zlevel: 0,
+          yAxisIndex: 0,
+          name: 'Rewards BTC',
+          data: data.blockRewards,
+          type: 'line',
+          smooth: 0.25,
+          symbol: 'none',
+        },
+        {
+          legendHoverLink: false,
+          zlevel: 1,
+          yAxisIndex: 1,
+          name: 'Rewards USD',
+          data: data.blockRewardsUSD,
+          type: 'line',
+          smooth: 0.25,
+          symbol: 'none',
+          lineStyle: {
+            width: 2,
+            opacity: 0.75,
+          },
+          areaStyle: {
+            opacity: 0.05,
+          }
+        },
+      ],
+      dataZoom: data.blockRewards.length === 0 ? undefined : [{
         type: 'inside',
         realtime: true,
         zoomLock: true,

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

@@ -31,7 +31,7 @@
             <div class="tooltip-custom">
               <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
                 <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
-                  onError="this.src = './resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
+                  onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
                 <span class="pool-name">{{ block.extras.pool.name }}</span>
               </a>
               <span *ngIf="!widget" class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>

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

@@ -64,7 +64,7 @@ export class BlocksList implements OnInit {
                 if (this.indexingAvailable) {
                   for (const block of blocks) {
                     // @ts-ignore: Need to add an extra field for the template
-                    block.extras.pool.logo = `./resources/mining-pools/` +
+                    block.extras.pool.logo = `/resources/mining-pools/` +
                       block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
                   }
                 }
@@ -97,7 +97,7 @@ export class BlocksList implements OnInit {
           this.blocksCount = Math.max(this.blocksCount, blocks[1][0].height) + 1;
           if (this.stateService.env.MINING_DASHBOARD) {
             // @ts-ignore: Need to add an extra field for the template
-            blocks[1][0].extras.pool.logo = `./resources/mining-pools/` +
+            blocks[1][0].extras.pool.logo = `/resources/mining-pools/` +
               blocks[1][0].extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
           }
           acc.unshift(blocks[1][0]);

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

@@ -1,5 +1,5 @@
 <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;">
   <button #btn class="btn btn-sm btn-link pt-0" [style]="{'line-height': size === 'small' ? '0.2' : '0.8'}" [attr.data-clipboard-text]="text"> 
-    <img src="./resources/clippy.svg" [width]="size === 'small' ? 10 : 13">
+    <img src="/resources/clippy.svg" [width]="size === 'small' ? 10 : 13">
   </button>
 </span>

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

@@ -1,10 +1,10 @@
 <div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING" class="mb-3 d-flex menu"
   style="padding: 0px 35px;">
 
-  <a routerLinkActive="active" class="btn btn-primary w-50 mr-1"
+  <a routerLinkActive="active" class="btn btn-primary mr-1" [class]="padding"
     [routerLink]="['/graphs/mempool' | relativeUrl]">Mempool</a>
 
-  <div ngbDropdown class="w-50" *ngIf="stateService.env.MINING_DASHBOARD">
+  <div ngbDropdown class="mr-1" [class]="padding" *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]"
@@ -27,7 +27,7 @@
     </div>
   </div>
 
-  <div ngbDropdown class="w-50" *ngIf="stateService.env.LIGHTNING">
+  <div ngbDropdown [class]="padding" *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]"

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

@@ -8,6 +8,8 @@ import { WebsocketService } from "src/app/services/websocket.service";
   styleUrls: ['./graphs.component.scss'],
 })
 export class GraphsComponent implements OnInit {
+  padding = 'w-50';
+
   constructor(
     public stateService: StateService,
     private websocketService: WebsocketService
@@ -15,5 +17,9 @@ 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';
+    }
   }
 }

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

@@ -351,6 +351,7 @@ export class HashrateChartComponent implements OnInit {
       series: data.hashrates.length === 0 ? [] : [
         {
           zlevel: 0,
+          yAxisIndex: 0,
           name: $localize`:@@79a9dc5b1caca3cbeb1733a19515edacc5fc7920:Hashrate`,
           showSymbol: false,
           symbol: 'none',

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

@@ -3,7 +3,7 @@
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
     <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
-      <img src="./resources/liquid/liquid-network-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">
+      <img src="/resources/liquid/liquid-network-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">
       <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>
@@ -13,16 +13,16 @@
 
   <div ngbDropdown (window:resize)="onResize($event)" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
     <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <img src="./resources/{{ network.val === '' ? 'liquid' : network.val }}-logo.png" style="width: 25px; height: 25px;" class="mr-1">
+      <img src="/resources/{{ network.val === '' ? 'liquid' : network.val }}-logo.png" style="width: 25px; height: 25px;" class="mr-1">
     </button>
     <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
-      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
-      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/signet'" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
-      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
+      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><img src="/resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
+      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/signet'" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="/resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
+      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="/resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
       <h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
-      <a [href]="env.BISQ_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
-      <a ngbDropdownItem class="liquid mr-1" [class.active]="network.val === 'liquid'" routerLink="/"><img src="./resources/liquid-logo.png" style="width: 30px;"> Liquid</a>
-      <a ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquidtestnet'" routerLink="/testnet"><img src="./resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1"> Liquid Testnet</a>
+      <a [href]="env.BISQ_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><img src="/resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
+      <a ngbDropdownItem class="liquid mr-1" [class.active]="network.val === 'liquid'" routerLink="/"><img src="/resources/liquid-logo.png" style="width: 30px;"> Liquid</a>
+      <a ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquidtestnet'" routerLink="/testnet"><img src="/resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1"> Liquid Testnet</a>
     </div>
   </div>
 

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

@@ -3,7 +3,7 @@
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
     <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
-      <img *ngIf="!officialMempoolSpace" src="./resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }" alt="The Mempool Open Source Project logo">
+      <img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }" alt="The Mempool Open Source Project logo">
       <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" 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>
@@ -14,16 +14,16 @@
 
   <div (window:resize)="onResize($event)" ngbDropdown class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
     <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <img src="./resources/{{ network.val === '' ? 'bitcoin' : network.val }}-logo.png" style="width: 25px; height: 25px;" class="mr-1" [alt]="(network.val === '' ? 'bitcoin' : network.val) + ' logo'">
+      <img src="/resources/{{ network.val === '' ? 'bitcoin' : network.val }}-logo.png" style="width: 25px; height: 25px;" class="mr-1" [alt]="(network.val === '' ? 'bitcoin' : network.val) + ' logo'">
     </button>
     <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
-      <a ngbDropdownItem class="mainnet" routerLink="/"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</a>
-      <a ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" routerLink="/signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="signet mr-1" alt="logo"> Signet</a>
-      <a ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1" alt="testnet logo"> Testnet</a>
+      <a ngbDropdownItem class="mainnet" routerLink="/"><img src="/resources/bitcoin-logo.png" style="width: 30px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</a>
+      <a ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" routerLink="/signet"><img src="/resources/signet-logo.png" style="width: 30px;" class="signet mr-1" alt="logo"> Signet</a>
+      <a ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" routerLink="/testnet"><img src="/resources/testnet-logo.png" style="width: 30px;" class="mr-1" alt="testnet logo"> Testnet</a>
       <h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
-      <a [href]="env.BISQ_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1" alt="bisq logo"> Bisq</a>
-      <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network.val === 'liquid'"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1" alt="liquid mainnet logo"> Liquid</a>
-      <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquid'"><img src="./resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</a>
+      <a [href]="env.BISQ_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="bisq"><img src="/resources/bisq-logo.png" style="width: 30px;" class="mr-1" alt="bisq logo"> Bisq</a>
+      <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network.val === 'liquid'"><img src="/resources/liquid-logo.png" style="width: 30px;" class="mr-1" alt="liquid mainnet logo"> Liquid</a>
+      <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquid'"><img src="/resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</a>
     </div>
   </div>
 

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -99,7 +99,7 @@
         <tr *ngFor="let pool of miningStats.pools">
           <td class="d-none d-md-block">{{ pool.rank }}</td>
           <td class="text-right">
-            <img width="25" height="25" src="{{ pool.logo }}" [alt]="pool.name + ' mining pool logo'" onError="this.src = './resources/mining-pools/default.svg'">
+            <img width="25" height="25" src="{{ pool.logo }}" [alt]="pool.name + ' mining pool logo'" onError="this.src = '/resources/mining-pools/default.svg'">
           </td>
           <td class=""><a [routerLink]="[('/mining/pool/' + pool.slug) | relativeUrl]">{{ pool.name }}</a></td>
           <td class="" *ngIf="this.miningWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{

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

@@ -6,7 +6,7 @@
   <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
     <div style="display:flex" class="mb-3">
       <img width="50" height="50" src="{{ poolStats['logo'] }}" [alt]="poolStats.pool.name + ' mining pool logo'"
-        onError="this.src = './resources/mining-pools/default.svg'" class="mr-3">
+        onError="this.src = '/resources/mining-pools/default.svg'" class="mr-3">
       <h1 class="m-0 pt-1 pt-md-0">{{ poolStats.pool.name }}</h1>
     </div>
 

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

@@ -81,7 +81,7 @@ export class PoolComponent implements OnInit {
           }
 
           return Object.assign({
-            logo: `./resources/mining-pools/` + poolStats.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg'
+            logo: `/resources/mining-pools/` + poolStats.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg'
           }, poolStats);
         })
       );

frontend/src/app/components/privacy-policy/privacy-policy.component.html

@@ -1,7 +1,7 @@
 <div class="container-xl">
   <div class="text-center">
     <br>
-    <img [src]="officialMempoolSpace ? './resources/mempool-space-logo-bigger.png' : './resources/mempool-logo-bigger.png'" style="width: 250px;height:63px;">
+    <img [src]="officialMempoolSpace ? '/resources/mempool-space-logo-bigger.png' : '/resources/mempool-logo-bigger.png'" style="width: 250px;height:63px;">
     <br><br>
 
     <h2>Privacy Policy</h2>

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

@@ -82,7 +82,7 @@
 
          <div class="qr-wrapper">
             <a [href]="bypassSecurityTrustUrl('bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount)" target="_blank">
-               <app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="'bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount"></app-qrcode>
+               <app-qrcode imageUrl="/resources/bitcoin-logo.png" [size]="200" [data]="'bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount"></app-qrcode>
             </a>
          </div>
          
@@ -100,7 +100,7 @@
 
          <div class="qr-wrapper">
             <a [href]="bypassSecurityTrustUrl('lightning:' + donationObj.addresses.BTC_LightningLike)" target="_blank">
-               <app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="donationObj.addresses.BTC_LightningLike.toUpperCase()"></app-qrcode>
+               <app-qrcode imageUrl="/resources/bitcoin-logo.png" [size]="200" [data]="donationObj.addresses.BTC_LightningLike.toUpperCase()"></app-qrcode>
             </a>
          </div>
 
@@ -125,7 +125,7 @@
 
          <div class="qr-wrapper">
             <a [href]="bypassSecurityTrustUrl('liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d')" target="_blank">
-               <app-qrcode imageUrl="./resources/liquid-bitcoin.png" [size]="200" [data]="'liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d'"></app-qrcode>
+               <app-qrcode imageUrl="/resources/liquid-bitcoin.png" [size]="200" [data]="'liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d'"></app-qrcode>
             </a>
          </div>
          <br>

frontend/src/app/components/terms-of-service/terms-of-service.component.html

@@ -1,7 +1,7 @@
 <div class="container-xl">
   <div class="text-center">
     <br />
-    <img [src]="officialMempoolSpace ? './resources/mempool-space-logo-bigger.png' : './resources/mempool-logo-bigger.png'" style="width: 250px;height:63px;">
+    <img [src]="officialMempoolSpace ? '/resources/mempool-space-logo-bigger.png' : '/resources/mempool-logo-bigger.png'" style="width: 250px;height:63px;">
     <br /><br />
 
     <h2>Terms of Service</h2>

frontend/src/app/components/trademark-policy/trademark-policy.component.html

@@ -69,27 +69,27 @@
 
           <div>
 
-            <img src="./resources/mempool-logo-bigger.png" style="width: 300px; max-width: 80%">
+            <img src="/resources/mempool-logo-bigger.png" style="width: 300px; max-width: 80%">
             <br><br>
             <p>The mempool Logo</p>
             <br><br>
 
-            <img src="./resources/mempool-space-logo-bigger.png" style="width: 300px; max-width: 80%">
+            <img src="/resources/mempool-space-logo-bigger.png" style="width: 300px; max-width: 80%">
             <br><br>
             <p>The mempool.space Vertical Logo</p>
             <br><br>
 
-            <img src="./resources/mempool-space-logo-horizontal.png" style="width: 450px; max-width: 80%">
+            <img src="/resources/mempool-space-logo-horizontal.png" style="width: 450px; max-width: 80%">
             <br><br>
             <p>The mempool.space Horizontal Logo</p>
             <br><br>
 
-            <img src="./resources/mempool-tube.png" style="width: 100px">
+            <img src="/resources/mempool-tube.png" style="width: 100px">
             <br><br>
             <p>The mempool Square Logo</p>
             <br><br>
 
-            <img src="./resources/mempool-blocks.png" style="width: 500px; max-width: 80%">
+            <img src="/resources/mempool-blocks.png" style="width: 500px; max-width: 80%">
             <br><br>
             <p>The mempool Blocks Logo</p>
             <br><br>

frontend/src/app/components/transaction/libwally.js

@@ -28,7 +28,7 @@ const WALLY_OK = 0,
   ASSET_TAG_LEN = 32,
   BLINDING_FACTOR_LEN = 32;
 
-const WASM_URL = `./resources/wallycore/wallycore.js`;
+const WASM_URL = `/resources/wallycore/wallycore.js`;
 
 let load_promise, Module;
 export function load() {

frontend/src/app/dashboard/dashboard.component.html

@@ -97,7 +97,7 @@
                 <td *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4">
                   <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
                     <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
-                      onError="this.src = './resources/mining-pools/default.svg'">
+                      onError="this.src = '/resources/mining-pools/default.svg'">
                     <span class="pool-name">{{ block.extras.pool.name }}</span>
                   </a>
                 </td>

frontend/src/app/dashboard/dashboard.component.ts

@@ -151,7 +151,7 @@ export class DashboardComponent implements OnInit {
           if (this.stateService.env.MINING_DASHBOARD === true) {
             for (const block of acc) {
               // @ts-ignore: Need to add an extra field for the template
-              block.extras.pool.logo = `./resources/mining-pools/` +
+              block.extras.pool.logo = `/resources/mining-pools/` +
                 block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
             }
           }

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

@@ -33,6 +33,14 @@
                   <app-sats [satoshis]="node.channels_capacity_avg"></app-sats><app-fiat [value]="node.channels_capacity_avg" digitsInfo="1.0-0"></app-fiat>
                 </td>
               </tr>
+              <tr *ngIf="node.country && node.city && node.subdivision">
+                <td i18n="location">Location</td>
+                <td>{{ node.city.en }}, {{ node.subdivision.en }}<br>{{ node.country.en }}</td>
+              </tr>
+              <tr *ngIf="node.country && !node.city">
+                <td i18n="location">Location</td>
+                <td>{{ node.country.en }}</td>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -56,6 +64,12 @@
                 <td i18n="address.balance">Color</td>
                 <td><div [ngStyle]="{'color': node.color}">{{ node.color }}</div></td>
               </tr>
+              <tr *ngIf="node.country">
+                <td i18n="isp">ISP</td>
+                <td>
+                  {{ node.as_organization }} [ASN {{node.as_number}}]
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>

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

@@ -18,7 +18,7 @@ export class AudioService {
       return;
     }
     this.isPlaying = true;
-    this.audio.src = '../../../resources/sounds/' + name + '.mp3';
+    this.audio.src = '/resources/sounds/' + name + '.mp3';
     this.audio.load();
     this.audio.volume = 0.65; // 65% volume
     this.audio.play().catch((e) => {

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

@@ -96,7 +96,7 @@ export class MiningService {
         share: parseFloat((poolStat.blockCount / stats.blockCount * 100).toFixed(2)),
         lastEstimatedHashrate: (poolStat.blockCount / stats.blockCount * stats.lastEstimatedHashrate / hashrateDivider).toFixed(2),
         emptyBlockRatio: (poolStat.emptyBlocks / poolStat.blockCount * 100).toFixed(2),
-        logo: `./resources/mining-pools/` + poolStat.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg',
+        logo: `/resources/mining-pools/` + poolStat.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg',
         ...poolStat
       };
     });

frontend/src/app/shared/pipes/fiat-shortener.pipe.ts

@@ -0,0 +1,37 @@
+import { formatCurrency, getCurrencySymbol } from '@angular/common';
+import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'fiatShortener'
+})
+export class FiatShortenerPipe implements PipeTransform {
+  constructor(
+    @Inject(LOCALE_ID) public locale: string
+  ) {}
+
+  transform(num: number, ...args: any[]): unknown {
+    const digits = args[0] || 1;
+    const unit = args[1] || undefined;
+
+    if (num < 1000) {
+      return num.toFixed(digits);
+    }
+
+    const lookup = [
+      { value: 1, symbol: '' },
+      { value: 1e3, symbol: 'k' },
+      { value: 1e6, symbol: 'M' },
+      { value: 1e9, symbol: 'G' },
+      { value: 1e12, symbol: 'T' },
+      { value: 1e15, symbol: 'P' },
+      { value: 1e18, symbol: 'E' }
+    ];
+    const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+    const item = lookup.slice().reverse().find((item) => num >= item.value);
+
+    let result = item ? (num / item.value).toFixed(digits).replace(rx, '$1') : '0';
+    result = formatCurrency(parseInt(result, 10), this.locale, getCurrencySymbol('USD', 'narrow'), 'USD', '1.0-0');
+
+    return result + item.symbol;
+  }
+}