Merge branch 'master' into nymkappa/clip-label-overflow

2023-04-22 20:10:27 +02:00
parent 7ab373ecac 2fbe2b2fa6
commit 99af881cdd
81 changed files with 5058 additions and 2508 deletions
--- a/frontend/cypress/e2e/mainnet/mainnet.spec.ts
+++ b/frontend/cypress/e2e/mainnet/mainnet.spec.ts
@@ -127,7 +127,7 @@ describe('Mainnet', () => {

        cy.get('.search-box-container > .form-control').type('S').then(() => {
          cy.wait('@search-1wizS');
-          cy.get('app-search-results button.dropdown-item').should('have.length', 5);
+          cy.get('app-search-results button.dropdown-item').should('have.length', 6);
        });

        cy.get('.search-box-container > .form-control').type('A').then(() => {
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@@ -204,9 +204,9 @@
        <img class="image" src="/resources/profile/raspiblitz.svg" />
        <span>RaspiBlitz</span>
      </a>
-      <a href="https://github.com/mynodebtc/mynode" target="_blank" title="MyNode">
-        <img class="image" src="/resources/profile/mynodebtc.jpg" />
-        <span>MyNode</span>
+      <a href="https://github.com/mynodebtc/mynode" target="_blank" title="myNode">
+        <img class="image" src="/resources/profile/mynodebtc.png" />
+        <span>myNode</span>
      </a>
      <a href="https://github.com/RoninDojo/RoninDojo" target="_blank" title="RoninDojo">
        <img class="image" src="/resources/profile/ronindojo.png" />
@@ -253,7 +253,7 @@
        <span>Sparrow</span>
      </a>
      <a href="https://github.com/ACINQ/phoenix" target="_blank" title="Phoenix Wallet by ACINQ">
-        <img class="image" src="/resources/profile/phoenix.jpg" />
+        <img class="image not-rounded" src="/resources/profile/phoenix.svg" />
        <span>Phoenix</span>
      </a>
      <a href="https://github.com/lnbits/lnbits-legend" target="_blank" title="LNbits">
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -23,7 +23,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  @Input() unavailable: boolean = false;
  @Input() auditHighlighting: boolean = false;
  @Input() blockConversion: Price;
-  @Output() txClickEvent = new EventEmitter<TransactionStripped>();
+  @Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>();
  @Output() txHoverEvent = new EventEmitter<string>();
  @Output() readyEvent = new EventEmitter();

@@ -326,7 +326,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    if (event.target === this.canvas.nativeElement && event.pointerType === 'touch') {
      this.setPreviewTx(event.offsetX, event.offsetY, true);
    } else if (event.target === this.canvas.nativeElement) {
-      this.onTxClick(event.offsetX, event.offsetY);
+      const keyMod = event.shiftKey || event.ctrlKey || event.metaKey;
+      const middleClick = event.which === 2 || event.button === 1;
+      this.onTxClick(event.offsetX, event.offsetY, keyMod || middleClick);
    }
  }

@@ -409,12 +411,12 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    }
  }

-  onTxClick(cssX: number, cssY: number) {
+  onTxClick(cssX: number, cssY: number, keyModifier: boolean = false) {
    const x = cssX * window.devicePixelRatio;
    const y = cssY * window.devicePixelRatio;
    const selected = this.scene.getTxAt({ x, y });
    if (selected && selected.txid) {
-      this.txClickEvent.emit(selected);
+      this.txClickEvent.emit({ tx: selected, keyModifier });
    }
  }

--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -612,9 +612,13 @@ export class BlockComponent implements OnInit, OnDestroy {
    });
  }

-  onTxClick(event: TransactionStripped): void {
-    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.txid}`);
-    this.router.navigate([url]);
+  onTxClick(event: { tx: TransactionStripped, keyModifier: boolean }): void {
+    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.tx.txid}`);
+    if (!event.keyModifier) {
+      this.router.navigate([url]);
+    } else {
+      window.open(url, '_blank');
+    }
  }

  onTxHover(txid: string): void {
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -90,6 +90,8 @@
 </nav>
 </header>

+<app-testnet-alert *ngIf="network.val === 'liquidtestnet'"></app-testnet-alert>
+
 <br />

 <router-outlet></router-outlet>
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -62,6 +62,8 @@
 </nav>
 </header>

+<app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
+
 <br />

 <router-outlet></router-outlet>
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -192,4 +192,4 @@ nav {
    margin: 33px 0px 0px -19px;
    font-size: 7px;
  }
-}
+}
--- a/frontend/src/app/components/master-page/master-page.component.ts
+++ b/frontend/src/app/components/master-page/master-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { LanguageService } from '../../services/language.service';
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
@@ -107,8 +107,12 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
    this.isLoading$.next(false);
  }

-  onTxClick(event: TransactionStripped): void {
-    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.txid}`);
-    this.router.navigate([url]);
+  onTxClick(event: { tx: TransactionStripped, keyModifier: boolean }): void {
+    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.tx.txid}`);
+    if (!event.keyModifier) {
+      this.router.navigate([url]);
+    } else {
+      window.open(url, '_blank');
+    }
  }
 }
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@@ -2,7 +2,7 @@
  <div class="mempool-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(difficultyAdjustments$ | async) as da;">
    <div class="flashing">
      <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
-        <div @blockEntryTrigger [@.disabled]="!animateEntry" [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
+        <div @blockEntryTrigger [@.disabled]="i > 0 || !animateEntry" [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
          <a draggable="false" [routerLink]="['/mempool-block/' | relativeUrl, i]"
            class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
          <div class="block-body">
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener } from '@angular/core';
 import { Subscription, Observable, fromEvent, merge, of, combineLatest } from 'rxjs';
 import { MempoolBlock } from '../../interfaces/websocket.interface';
 import { StateService } from '../../services/state.service';
@@ -222,8 +222,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
    clearTimeout(this.resetTransitionTimeout);
  }

+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    this.animateEntry = false;
+  }
+
  trackByFn(index: number, block: MempoolBlock) {
-    return (block.isStack) ? 'stack' : block.index;
+    return (block.isStack) ? `stack-${block.index}` : block.index;
  }

  reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
--- a/frontend/src/app/components/start/start.component.ts
+++ b/frontend/src/app/components/start/start.component.ts
@@ -137,9 +137,11 @@ export class StartComponent implements OnInit, OnDestroy {
  }

  onMouseDown(event: MouseEvent) {
-    this.mouseDragStartX = event.clientX;
-    this.resetMomentum(event.clientX);
-    this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft;
+    if (!(event.which > 1 || event.button > 0)) {
+      this.mouseDragStartX = event.clientX;
+      this.resetMomentum(event.clientX);
+      this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft;
+    }
  }
  onPointerDown(event: PointerEvent) {
    if (this.isiOS) {
--- a/frontend/src/app/components/transaction/transaction-preview.component.html
+++ b/frontend/src/app/components/transaction/transaction-preview.component.html
@@ -8,10 +8,7 @@
    </div>
    <div *ngIf="network !== 'liquid' && network !== 'liquidtestnet'" class="features">
      <app-tx-features [tx]="tx"></app-tx-features>
-      <span *ngIf="cpfpInfo && (cpfpInfo.bestDescendant || cpfpInfo.descendants.length)" class="badge badge-primary mr-1">
-        CPFP
-      </span>
-      <span *ngIf="cpfpInfo && !cpfpInfo.bestDescendant && !cpfpInfo.descendants.length && cpfpInfo.ancestors.length" class="badge badge-info mr-1">
+      <span *ngIf="cpfpInfo && (cpfpInfo?.bestDescendant || cpfpInfo?.descendants?.length || cpfpInfo?.ancestors?.length)" class="badge badge-primary ml-1 mr-1">
        CPFP
      </span>
    </div>
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -1,3 +1,5 @@
+<div infiniteScroll [alwaysCallback]="true" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
+
 <ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
  <div *ngIf="!transactionPage" class="header-bg box tx-page-container">
    <a class="tx-link" [routerLink]="['/tx/' | relativeUrl, tx.txid]">
@@ -11,7 +13,7 @@
    </div>
  </div>

-  <div class="header-bg box" infiniteScroll [alwaysCallback]="true" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [attr.data-cy]="'tx-' + i">
+  <div class="header-bg box" [attr.data-cy]="'tx-' + i">

    <div *ngIf="errorUnblinded" class="error-unblinded">{{ errorUnblinded }}</div>
    <div class="row">
@@ -321,6 +323,8 @@

 </ng-container>

+</div>
+
 <ng-template #assetBox let-item>
  {{ item.value / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} {{ assetsMinimal[item.asset][1] }}
  <br />
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -182,14 +182,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
  }

  onScroll(): void {
-    const scrollHeight = document.body.scrollHeight;
-    const scrollTop = document.documentElement.scrollTop;
-    if (scrollHeight > 0) {
-      const percentageScrolled = scrollTop * 100 / scrollHeight;
-      if (percentageScrolled > 50) {
-        this.loadMore.emit();
-      }
-    }
+    this.loadMore.emit();
  }

  haveBlindedOutputValues(tx: Transaction): boolean {
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html
+++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html
@@ -29,7 +29,7 @@
  <ng-template #pegout>
    <ng-container *ngIf="line.pegout; else normal">
      <p *ngIf="!isConnector">Peg Out</p>
-      <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
+      <p *ngIf="line.displayValue != null"><app-amount [satoshis]="line.displayValue"></app-amount></p>
      <p class="address">
        <app-truncate [text]="line.pegout"></app-truncate>
      </p>
@@ -55,18 +55,18 @@
            <p *ngSwitchCase="'output'"><span i18n="transaction.input">Input</span>&nbsp; #{{ line.vin + 1 }}</p>
          </ng-container>
      </ng-container>
-      <p *ngIf="line.value == null && line.confidential" i18n="shared.confidential">Confidential</p>
-      <p *ngIf="line.value != null">
+      <p *ngIf="line.displayValue == null && line.confidential" i18n="shared.confidential">Confidential</p>
+      <p *ngIf="line.displayValue != null">
        <ng-template [ngIf]="line.asset && line.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
          <div *ngIf="assetsMinimal && assetsMinimal[line.asset] else assetNotFound">
            <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: line }"></ng-container>
          </div>
          <ng-template #assetNotFound>
-            {{ line.value }} <span class="symbol">{{ line.asset | slice : 0 : 7 }}</span>
+            {{ line.displayValue }} <span class="symbol">{{ line.asset | slice : 0 : 7 }}</span>
          </ng-template>
        </ng-template>
        <ng-template #defaultOutput>
-          <app-amount [blockConversion]="blockConversion" [satoshis]="line.value"></app-amount>
+          <app-amount [blockConversion]="blockConversion" [satoshis]="line.displayValue"></app-amount>
        </ng-template>
      </p>
      <p *ngIf="line.type !== 'fee' && line.address" class="address">
@@ -76,5 +76,5 @@
 </div>

 <ng-template #assetBox let-item>
-  {{ item.value / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} <span class="symbol">{{ assetsMinimal[item.asset][1] }}</span>
+  {{ item.displayValue / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} <span class="symbol">{{ assetsMinimal[item.asset][1] }}</span>
 </ng-template>
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts
+++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts
@@ -7,6 +7,7 @@ import { environment } from '../../../environments/environment';
 interface Xput {
  type: 'input' | 'output' | 'fee';
  value?: number;
+  displayValue?: number;
  index?: number;
  txid?: string;
  vin?: number;
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
@@ -1,12 +1,13 @@
 import { Component, OnInit, Input, OnChanges, HostListener, Inject, LOCALE_ID } from '@angular/core';
 import { StateService } from '../../services/state.service';
-import { Outspend, Transaction } from '../../interfaces/electrs.interface';
+import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.interface';
 import { Router } from '@angular/router';
 import { ReplaySubject, merge, Subscription, of } from 'rxjs';
 import { tap, switchMap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { AssetsService } from '../../services/assets.service';
+import { environment } from '../../../environments/environment';

 interface SvgLine {
  path: string;
@@ -20,6 +21,7 @@ interface SvgLine {
 interface Xput {
  type: 'input' | 'output' | 'fee';
  value?: number;
+  displayValue?: number;
  index?: number;
  txid?: string;
  vin?: number;
@@ -74,6 +76,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
  zeroValueThickness = 20;
  hasLine: boolean;
  assetsMinimal: any;
+  nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;

  outspendsSubscription: Subscription;
  refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
@@ -167,7 +170,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
    let voutWithFee = this.tx.vout.map((v, i) => {
      return {
        type: v.scriptpubkey_type === 'fee' ? 'fee' : 'output',
-        value: v?.value,
+        value: this.getOutputValue(v),
+        displayValue: v?.value,
        address: v?.scriptpubkey_address || v?.scriptpubkey_type?.toUpperCase(),
        index: i,
        pegout: v?.pegout?.scriptpubkey_address,
@@ -185,7 +189,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
    let truncatedInputs = this.tx.vin.map((v, i) => {
      return {
        type: 'input',
-        value: v?.prevout?.value || (v?.is_coinbase && !totalValue ? 0 : undefined),
+        value: (v?.is_coinbase && !totalValue ? 0 : this.getInputValue(v)),
+        displayValue: v?.prevout?.value,
        txid: v.txid,
        vout: v.vout,
        address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(),
@@ -229,14 +234,14 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
  }

  calcTotalValue(tx: Transaction): number {
-    const totalOutput = this.tx.vout.reduce((acc, v) => (v.value == null ? 0 : v.value) + acc, 0);
+    let totalOutput = this.tx.vout.reduce((acc, v) => (this.getOutputValue(v) || 0) + acc, 0);
    // simple sum of outputs + fee for bitcoin
    if (!this.isLiquid) {
      return this.tx.fee ? totalOutput + this.tx.fee : totalOutput;
    } else {
-      const totalInput = this.tx.vin.reduce((acc, v) => (v?.prevout?.value == null ? 0 : v.prevout.value) + acc, 0);
-      const confidentialInputCount = this.tx.vin.reduce((acc, v) => acc + (v?.prevout?.value == null ? 1 : 0), 0);
-      const confidentialOutputCount = this.tx.vout.reduce((acc, v) => acc + (v.value == null ? 1 : 0), 0);
+      const totalInput = this.tx.vin.reduce((acc, v) => (this.getInputValue(v) || 0) + acc, 0);
+      const confidentialInputCount = this.tx.vin.reduce((acc, v) => acc + (this.isUnknownInputValue(v) ? 1 : 0), 0);
+      const confidentialOutputCount = this.tx.vout.reduce((acc, v) => acc + (this.isUnknownOutputValue(v) ? 1 : 0), 0);

      // if there are unknowns on both sides, the total is indeterminate, so we'll just fudge it
      if (confidentialInputCount && confidentialOutputCount) {
@@ -456,6 +461,34 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
    }
  }

+  getOutputValue(v: Vout): number | void {
+    if (!v) {
+      return null;
+    } else if (this.isLiquid && v.asset !== this.nativeAssetId) {
+      return null;
+    } else {
+      return v.value;
+    }
+  }
+
+  getInputValue(v: Vin): number | void {
+    if (!v?.prevout) {
+      return null;
+    } else if (this.isLiquid && v.prevout.asset !== this.nativeAssetId) {
+      return null;
+    } else {
+      return v.prevout.value;
+    }
+  }
+
+  isUnknownInputValue(v: Vin): boolean {
+    return v?.prevout?.value == null || this.isLiquid && v?.prevout?.asset !== this.nativeAssetId;
+  }
+
+  isUnknownOutputValue(v: Vout): boolean {
+    return v?.value == null || this.isLiquid && v?.asset !== this.nativeAssetId;
+  }
+
  @HostListener('pointermove', ['$event'])
  onPointerMove(event) {
    if (this.dir === 'rtl') {
--- a/frontend/src/app/docs/api-docs/api-docs-data.ts
+++ b/frontend/src/app/docs/api-docs/api-docs-data.ts
@@ -8863,7 +8863,7 @@ export const faqData = [
    type: "endpoint",
    category: "advanced",
    showConditions: bitcoinNetworks,
-    fragment: "how-big-is-mempool-used-by-mempool.space",
+    fragment: "how-big-is-mempool-used-by-mempool-space",
    title: "How big is the mempool used by mempool.space?",
    options: { officialOnly: true },
  },
--- a/frontend/src/app/docs/api-docs/api-docs.component.html
+++ b/frontend/src/app/docs/api-docs/api-docs.component.html
@@ -207,7 +207,7 @@
  <p>When a Bitcoin transaction is made, it is stored in a Bitcoin node's mempool before it is confirmed into a block. When the rate of incoming transactions exceeds the rate transactions are confirmed, the mempool grows in size.</p><p>By default, Bitcoin Core allocates 300MB of memory for its mempool, so when a node's mempool grows big enough to use all 300MB of allocated memory, we say it's "full".</p><p>Once a node's mempool is using all of its allocated memory, it will start rejecting new transactions below a certain feerate threshold—so when this is the case, be extra sure to set a feerate that (at a minimum) exceeds that threshold. The current threshold feerate (and memory usage) are displayed right on Mempool's front page.</p>
 </ng-template>

-<ng-template type="how-big-is-mempool-used-by-mempool.space">
+<ng-template type="how-big-is-mempool-used-by-mempool-space">
  <p>mempool.space uses multiple Bitcoin nodes to obtain data: some with the default 300MB mempool memory limit (call these Small Nodes) and others with a much larger mempool memory limit (call these Big Nodes).</p>
  <p>Many nodes on the Bitcoin network are configured to run with the default 300MB mempool memory setting. When all 300MB of memory are used up, such nodes will reject transactions below a certain threshold feerate. Running Small Nodes allows mempool.space to tell you what this threshold feerate is—this is the "Purging" feerate that shows on the front page when mempools are full, which you can use to be reasonably sure that your transaction will be widely propagated.</p>
    <p>Big Node mempools are so big that they don't need to reject (or purge) transactions. Such nodes allow for mempool.space to provide you with information on any pending transaction it has received—no matter how congested the mempool is, and no matter how low-feerate or low-priority the transaction is.</p>
--- a/frontend/src/app/fiat/fiat.component.html
+++ b/frontend/src/app/fiat/fiat.component.html
@@ -1,4 +1,4 @@
-<span class="green-color" *ngIf="blockConversion; else noblockconversion">
+<span [class]="colorClass" *ngIf="blockConversion; else noblockconversion">
  {{
    (
      (blockConversion.price[currency] > -1 ? blockConversion.price[currency] : null) ??
@@ -8,7 +8,7 @@
 </span>

 <ng-template #noblockconversion>
-  <span class="green-color" *ngIf="(conversions$ | async) as conversions">
+  <span [class]="colorClass" *ngIf="(conversions$ | async) as conversions">
    {{ (conversions[currency] > -1 ? conversions[currency] : 0) * value / 100000000 | fiatCurrency : digitsInfo : currency }}
  </span>
 </ng-template>
--- a/frontend/src/app/fiat/fiat.component.scss
+++ b/frontend/src/app/fiat/fiat.component.scss
@@ -1,3 +0,0 @@
-.green-color {
-  color: #3bcc49;
-}
--- a/frontend/src/app/fiat/fiat.component.ts
+++ b/frontend/src/app/fiat/fiat.component.ts
@@ -6,7 +6,7 @@ import { StateService } from '../services/state.service';
@Component({
  selector: 'app-fiat',
  templateUrl: './fiat.component.html',
-  styleUrls: ['./fiat.component.scss'],
+  styleUrls: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FiatComponent implements OnInit, OnDestroy {
@@ -17,6 +17,7 @@ export class FiatComponent implements OnInit, OnDestroy {
  @Input() value: number;
  @Input() digitsInfo = '1.2-2';
  @Input() blockConversion: Price;
+  @Input() colorClass = 'green-color';

  constructor(
    private stateService: StateService,
--- a/frontend/src/app/lightning/node/node-preview.component.html
+++ b/frontend/src/app/lightning/node/node-preview.component.html
@@ -12,7 +12,7 @@
    </div>
  </div>
  <div class="row">
-    <div class="col-md">
+    <div class="col-md table-col">
      <a class="subtitle" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">{{ node.public_key }}</a>
      <table class="table table-borderless table-striped">
        <tbody>
--- a/frontend/src/app/lightning/node/node-preview.component.scss
+++ b/frontend/src/app/lightning/node/node-preview.component.scss
@@ -18,6 +18,10 @@
  }
 }

+.table-col {
+  max-width: calc(100% - 470px);
+}
+
 .map-col {
  flex-grow: 0;
  flex-shrink: 0;
--- a/frontend/src/app/services/storage.service.ts
+++ b/frontend/src/app/services/storage.service.ts
@@ -12,20 +12,22 @@ export class StorageService {

  setDefaultValueIfNeeded(key: string, defaultValue: string) {
    const graphWindowPreference: string = this.getValue(key);
+    const fragment = window.location.hash.replace('#', '');
+
    if (graphWindowPreference === null) { // First visit to mempool.space
-      if (this.router.url.includes('graphs') && key === 'graphWindowPreference' ||
-        this.router.url.includes('pools') && key === 'miningWindowPreference'
+      if (window.location.pathname.includes('graphs') && key === 'graphWindowPreference' ||
+        window.location.pathname.includes('pools') && key === 'miningWindowPreference'
      ) {
-        this.setValue(key, this.route.snapshot.fragment ? this.route.snapshot.fragment : defaultValue);
+        this.setValue(key, fragment ? fragment : defaultValue);
      } else {
        this.setValue(key, defaultValue);
      }
-    } else if (this.router.url.includes('graphs') && key === 'graphWindowPreference' ||
-      this.router.url.includes('pools') && key === 'miningWindowPreference'
+    } else if (window.location.pathname.includes('graphs') && key === 'graphWindowPreference' ||
+      window.location.pathname.includes('pools') && key === 'miningWindowPreference'
    ) {
      // Visit a different graphs#fragment from last visit
-      if (this.route.snapshot.fragment !== null && graphWindowPreference !== this.route.snapshot.fragment) {
-        this.setValue(key, this.route.snapshot.fragment);
+      if (fragment !== null && graphWindowPreference !== fragment) {
+        this.setValue(key, fragment);
      }
    }
  }
--- a/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html
+++ b/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html
@@ -0,0 +1,8 @@
+<div class="container p-lg-0 pb-0" style="max-width: 100%; margin-top: 7px" *ngIf="storageService.getValue('hideWarning') !== 'hidden'">
+  <div class="alert alert-danger mb-0 text-center">
+    <div class="message-container" i18n="warning-testnet">This is a test network. Coins have no value.</div>
+    <button type="button" class="close" (click)="dismissWarning()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+</div>
--- a/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss
+++ b/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss
@@ -0,0 +1,31 @@
+.alert-danger {
+  color: #fff;
+  background-color: #b71c1c;
+  border-color: #b71c1c;
+  padding: 0.5rem 1.25rem;
+  margin: 0px 10px 0px 10px;
+
+  display: flex;
+  justify-content: center;
+}
+
+.message-container {
+  display: flex;
+  margin-left: auto;
+}
+
+.close {
+  display: flex;
+  color: #fff;
+  align-items: center;
+}
+
+button {
+  display: flex;
+  margin-left: auto;
+}
+
+span {
+  position: relative;
+  top: -2px;
+}
--- a/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.ts
+++ b/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { StorageService } from '../../../services/storage.service';
+
+@Component({
+  selector: 'app-testnet-alert',
+  templateUrl: './testnet-alert.component.html',
+  styleUrls: ['./testnet-alert.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TestnetAlertComponent {
+
+  constructor(
+    public storageService: StorageService,
+  ) { }
+
+  dismissWarning(): void {
+    this.storageService.setValue('hideWarning', 'hidden');
+  }
+
+}
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -84,6 +84,7 @@ import { SearchResultsComponent } from '../components/search-form/search-results
 import { TimestampComponent } from './components/timestamp/timestamp.component';
 import { ToggleComponent } from './components/toggle/toggle.component';
 import { GeolocationComponent } from '../shared/components/geolocation/geolocation.component';
+import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.component';

@NgModule({
  declarations: [
@@ -162,6 +163,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
    TimestampComponent,
    ToggleComponent,
    GeolocationComponent,
+    TestnetAlertComponent,
  ],
  imports: [
    CommonModule,
--- a/frontend/src/resources/profile/mynodebtc.jpg
+++ b/frontend/src/resources/profile/mynodebtc.jpg
--- a/frontend/src/resources/profile/mynodebtc.png
+++ b/frontend/src/resources/profile/mynodebtc.png
--- a/frontend/src/resources/profile/phoenix.jpg
+++ b/frontend/src/resources/profile/phoenix.jpg
--- a/frontend/src/resources/profile/phoenix.svg
+++ b/frontend/src/resources/profile/phoenix.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 62.449287 55.101883"
+   version="1.1"
+   id="svg395"
+   sodipodi:docname="phoenix.svg"
+   width="62.449287"
+   height="55.101883"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview397"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="12.259259"
+     inkscape:cx="29.936556"
+     inkscape:cy="27.978852"
+     inkscape:window-width="3840"
+     inkscape:window-height="2091"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg395" />
+  <defs
+     id="defs389">
+    <style
+       id="style387">.outline{fill:#50b338;}.bg{fill:#fff;}</style>
+  </defs>
+  <path
+     class="outline"
+     d="m 58.070086,17.34 a 6,6 0 0 0 0.58,-0.65 7.16,7.16 0 0 0 1,-7 c -2.14,-6.51 -10.58,-9.69 -25.75,-9.69 -11.82,0 -23,0 -28.8400005,19.87 -7.53,25.62 -6.16,34.13 0.84,35.13 4.2400005,0.61 6.6200005,-1.62 9.0000005,-4 2,-2 4,-4.46 7,-4 14,2 24.1,-0.21 29.85,-4.83 a 7.7,7.7 0 0 0 3.15,-6.17 5.52,5.52 0 0 0 -0.49,-2.38 c 4.61,-1.11 7.58,-3.4 8,-7.76 0.33,-3.86 -1.45,-6.59 -4.34,-8.52 z m -0.67,8.07 c -0.43,4.74 -11.72,4.46 -26.44,3.59 a 1,1 0 0 0 -1.06,0.91 1,1 0 0 0 0.88,1.09 l 2.43,0.3 c 5.83,0.7 16.69,1.98 16.69,4.7 a 3.44,3.44 0 0 1 -1.41,2.56 c -4,3.4 -15.54,5.16 -24.77,3.76 -4.9,-0.74 -7.55,1.45 -9.9,3.38 -2.09,1.71 -3.73,3.06 -6.6800005,2.33 a 1.59,1.59 0 0 1 -1,-0.83 c -1.74,-3.2 -0.36,-12.85 3.76,-25.9 C 14.950086,5 22.490086,5 33.900086,5 c 12.22,0 19.69,2.24 21,6.32 a 2.17,2.17 0 0 1 -0.2,2.25 c -2.47,3.16 -15.44,1.86 -19.7,1.43 a 1.0054974,1.0054974 0 0 0 -0.21,2 l 2.06,0.23 c 8.4,0.88 21.1,2.22 20.55,8.18 z"
+     id="path391" />
+  <path
+     class="bg"
+     d="m 36.900086,17.22 -2.11,-0.22 a 1.0054974,1.0054974 0 0 1 0.21,-2 c 4.26,0.43 17.23,1.73 19.75,-1.43 a 2.17,2.17 0 0 0 0.2,-2.25 c -1.36,-4.08 -8.83,-6.32 -21.05,-6.32 -11.41,0 -19,0 -24.0000005,16.3 -4.12,13.05 -5.5,22.7 -3.72,25.9 a 1.59,1.59 0 0 0 1,0.83 c 2.9500005,0.73 4.5900005,-0.62 6.6800005,-2.33 2.35,-1.93 5,-4.12 9.9,-3.38 9.23,1.4 20.81,-0.36 24.77,-3.76 a 3.44,3.44 0 0 0 1.37,-2.56 c 0,-2.72 -10.86,-4 -16.69,-4.71 l -2.43,-0.29 a 1,1 0 0 1 -0.88,-1.09 1,1 0 0 1 1.06,-0.91 c 14.72,0.87 26,1.15 26.44,-3.59 0.55,-5.96 -12.15,-7.3 -20.5,-8.19 z"
+     id="path393" />
+</svg>