Merge branch 'master' into nymkappa/feature/zero-base-fee-tag

frontend/src/app/app-routing.module.ts

@@ -3,14 +3,10 @@ import { Routes, RouterModule } from '@angular/router';
 import { AppPreloadingStrategy } from './app.preloading-strategy'
 import { StartComponent } from './components/start/start.component';
 import { TransactionComponent } from './components/transaction/transaction.component';
-import { TransactionPreviewComponent } from './components/transaction/transaction-preview.component';
 import { BlockComponent } from './components/block/block.component';
 import { BlockAuditComponent } from './components/block-audit/block-audit.component';
-import { BlockPreviewComponent } from './components/block/block-preview.component';
 import { AddressComponent } from './components/address/address.component';
-import { AddressPreviewComponent } from './components/address/address-preview.component';
 import { MasterPageComponent } from './components/master-page/master-page.component';
-import { MasterPagePreviewComponent } from './components/master-page-preview/master-page-preview.component';
 import { AboutComponent } from './components/about/about.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
@@ -346,61 +342,18 @@ let routes: Routes = [
   },
   {
     path: 'preview',
-    component: MasterPagePreviewComponent,
     children: [
       {
-        path: 'block/:id',
-        component: BlockPreviewComponent
+        path: '',
+        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
       },
       {
-        path: 'testnet/block/:id',
-        component: BlockPreviewComponent
+        path: 'testnet',
+        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
       },
       {
-        path: 'signet/block/:id',
-        component: BlockPreviewComponent
-      },
-      {
-        path: 'address/:id',
-        children: [],
-        component: AddressPreviewComponent
-      },
-      {
-        path: 'testnet/address/:id',
-        children: [],
-        component: AddressPreviewComponent
-      },
-      {
-        path: 'signet/address/:id',
-        children: [],
-        component: AddressPreviewComponent
-      },
-      {
-        path: 'tx/:id',
-        children: [],
-        component: TransactionPreviewComponent
-      },
-      {
-        path: 'testnet/tx/:id',
-        children: [],
-        component: TransactionPreviewComponent
-      },
-      {
-        path: 'signet/tx/:id',
-        children: [],
-        component: TransactionPreviewComponent
-      },
-      {
-        path: 'lightning',
-        loadChildren: () => import('./lightning/lightning-previews.module').then(m => m.LightningPreviewsModule)
-      },
-      {
-        path: 'testnet/lightning',
-        loadChildren: () => import('./lightning/lightning-previews.module').then(m => m.LightningPreviewsModule)
-      },
-      {
-        path: 'signet/lightning',
-        loadChildren: () => import('./lightning/lightning-previews.module').then(m => m.LightningPreviewsModule)
+        path: 'signet',
+        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
       },
     ],
   },
@@ -643,35 +596,14 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
     },
     {
       path: 'preview',
-      component: MasterPagePreviewComponent,
       children: [
         {
-          path: 'block/:id',
-          component: BlockPreviewComponent
+          path: '',
+          loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
         },
         {
-          path: 'testnet/block/:id',
-          component: BlockPreviewComponent
-        },
-        {
-          path: 'address/:id',
-          children: [],
-          component: AddressPreviewComponent
-        },
-        {
-          path: 'testnet/address/:id',
-          children: [],
-          component: AddressPreviewComponent
-        },
-        {
-          path: 'tx/:id',
-          children: [],
-          component: TransactionPreviewComponent
-        },
-        {
-          path: 'testnet/tx/:id',
-          children: [],
-          component: TransactionPreviewComponent
+          path: 'testnet',
+          loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
         },
       ],
     },

frontend/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
@@ -20,6 +20,23 @@ import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-st
 import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
 import { AppPreloadingStrategy } from './app.preloading-strategy';
 
+const providers = [
+  ElectrsApiService,
+  StateService,
+  WebsocketService,
+  AudioService,
+  SeoService,
+  OpenGraphService,
+  StorageService,
+  EnterpriseService,
+  LanguageService,
+  ShortenStringPipe,
+  FiatShortenerPipe,
+  CapAddressPipe,
+  AppPreloadingStrategy,
+  { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
+];
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -32,22 +49,17 @@ import { AppPreloadingStrategy } from './app.preloading-strategy';
     BrowserAnimationsModule,
     SharedModule,
   ],
-  providers: [
-    ElectrsApiService,
-    StateService,
-    WebsocketService,
-    AudioService,
-    SeoService,
-    OpenGraphService,
-    StorageService,
-    EnterpriseService,
-    LanguageService,
-    ShortenStringPipe,
-    FiatShortenerPipe,
-    CapAddressPipe,
-    AppPreloadingStrategy,
-    { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
-  ],
+  providers: providers,
   bootstrap: [AppComponent]
 })
 export class AppModule { }
+
+@NgModule({})
+export class MempoolSharedModule{
+  static forRoot(): ModuleWithProviders<MempoolSharedModule> {
+    return {
+      ngModule: AppModule,
+      providers: providers
+    };
+  }
+}

frontend/src/app/bisq/bisq-address/bisq-address.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { SeoService } from 'src/app/services/seo.service';
+import { SeoService } from '../../services/seo.service';
 import { switchMap, filter, catchError } from 'rxjs/operators';
 import { ParamMap, ActivatedRoute } from '@angular/router';
 import { Subscription, of } from 'rxjs';
 import { BisqTransaction } from '../bisq.interfaces';
 import { BisqApiService } from '../bisq-api.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-bisq-address',

frontend/src/app/bisq/bisq-block/bisq-block.component.ts

@@ -1,14 +1,14 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { BisqBlock } from 'src/app/bisq/bisq.interfaces';
+import { BisqBlock } from '../../bisq/bisq.interfaces';
 import { Location } from '@angular/common';
 import { BisqApiService } from '../bisq-api.service';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { Subscription, of } from 'rxjs';
 import { switchMap, catchError } from 'rxjs/operators';
-import { SeoService } from 'src/app/services/seo.service';
-import { ElectrsApiService } from 'src/app/services/electrs-api.service';
+import { SeoService } from '../../services/seo.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
 import { HttpErrorResponse } from '@angular/common/http';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-bisq-block',

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts

@@ -3,9 +3,9 @@ import { BisqApiService } from '../bisq-api.service';
 import { switchMap, map, take, mergeMap, tap } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
-import { SeoService } from 'src/app/services/seo.service';
+import { SeoService } from '../../services/seo.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-bisq-blocks',

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

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Observable, combineLatest, BehaviorSubject, of } from 'rxjs';
 import { map, share, switchMap } from 'rxjs/operators';
-import { SeoService } from 'src/app/services/seo.service';
-import { StateService } from 'src/app/services/state.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { SeoService } from '../../services/seo.service';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
 import { BisqApiService } from '../bisq-api.service';
 import { Trade } from '../bisq.interfaces';
 

frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Observable, combineLatest, BehaviorSubject, of } from 'rxjs';
 import { map, share, switchMap } from 'rxjs/operators';
-import { SeoService } from 'src/app/services/seo.service';
-import { StateService } from 'src/app/services/state.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { SeoService } from '../../services/seo.service';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
 import { BisqApiService } from '../bisq-api.service';
 import { Trade } from '../bisq.interfaces';
 

frontend/src/app/bisq/bisq-market/bisq-market.component.ts

@@ -3,8 +3,8 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, merge, Observable, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
-import { SeoService } from 'src/app/services/seo.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { SeoService } from '../../services/seo.service';
+import { WebsocketService } from '../../services/websocket.service';
 import { BisqApiService } from '../bisq-api.service';
 import { OffersMarket, Trade } from '../bisq.interfaces';
 

frontend/src/app/bisq/bisq-stats/bisq-stats.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { BisqApiService } from '../bisq-api.service';
 import { BisqStats } from '../bisq.interfaces';
-import { SeoService } from 'src/app/services/seo.service';
-import { StateService } from 'src/app/services/state.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { SeoService } from '../../services/seo.service';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-bisq-stats',

frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.ts

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
-import { BisqTransaction } from 'src/app/bisq/bisq.interfaces';
+import { BisqTransaction } from '../../bisq/bisq.interfaces';
 
 @Component({
   selector: 'app-bisq-transaction-details',

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { BisqTransaction } from 'src/app/bisq/bisq.interfaces';
+import { BisqTransaction } from '../../bisq/bisq.interfaces';
 import { switchMap, map, catchError } from 'rxjs/operators';
 import { of, Observable, Subscription } from 'rxjs';
-import { StateService } from 'src/app/services/state.service';
-import { Block, Transaction } from 'src/app/interfaces/electrs.interface';
+import { StateService } from '../../services/state.service';
+import { Block, Transaction } from '../../interfaces/electrs.interface';
 import { BisqApiService } from '../bisq-api.service';
-import { SeoService } from 'src/app/services/seo.service';
-import { ElectrsApiService } from 'src/app/services/electrs-api.service';
+import { SeoService } from '../../services/seo.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
 import { HttpErrorResponse } from '@angular/common/http';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-bisq-transaction',

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts

@@ -4,11 +4,11 @@ import { BisqTransaction, BisqOutput } from '../bisq.interfaces';
 import { Observable, Subscription } from 'rxjs';
 import { switchMap, map, tap } from 'rxjs/operators';
 import { BisqApiService } from '../bisq-api.service';
-import { SeoService } from 'src/app/services/seo.service';
+import { SeoService } from '../../services/seo.service';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { IMultiSelectOption, IMultiSelectSettings, IMultiSelectTexts } from 'src/app/components/ngx-bootstrap-multiselect/types'
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { IMultiSelectOption, IMultiSelectSettings, IMultiSelectTexts } from '../../components/ngx-bootstrap-multiselect/types'
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-bisq-transactions',

frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
-import { BisqTransaction } from 'src/app/bisq/bisq.interfaces';
-import { StateService } from 'src/app/services/state.service';
+import { BisqTransaction } from '../../bisq/bisq.interfaces';
+import { StateService } from '../../services/state.service';
 import { map } from 'rxjs/operators';
 import { Observable } from 'rxjs';
-import { Block } from 'src/app/interfaces/electrs.interface';
+import { Block } from '../../interfaces/electrs.interface';
 
 @Component({
   selector: 'app-bisq-transfers',

frontend/src/app/bisq/bsq-amount/bsq-amount.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
+import { StateService } from '../../services/state.service';
 import { Observable } from 'rxjs';
 
 @Component({

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

@@ -187,8 +187,8 @@
     </div>
   </div>
 
-  <div class="selfhosted-integrations-sponsor">
-    <h3 i18n="about.self-hosted-integrations">Self-Hosted Integrations</h3>
+  <div class="community-integrations-sponsor">
+    <h3 i18n="about.community-integrations">Community Integrations</h3>
     <div class="wrapper">
       <a href="https://github.com/getumbrel/umbrel" target="_blank" title="Umbrel">
         <img class="image" src="/resources/profile/umbrel.png" />
@@ -218,18 +218,24 @@
         <img class="image" src="/resources/profile/start9.png" />
         <span>EmbassyOS</span>
       </a>
-    </div>
-  </div>
-
-  <div class="community-integrations-sponsor">
-    <h3 i18n="about.wallet-integrations">Wallet Integrations</h3>
-    <div class="wrapper">
+      <a href="https://github.com/btcpayserver/btcpayserver" target="_blank" title="BTCPay Server">
+        <img class="image" src="/resources/profile/btcpayserver.svg" />
+        <span>BTCPay</span>
+      </a>
       <a href="https://github.com/bisq-network/bisq" target="_blank" title="Bisq">
         <img class="image" src="/resources/profile/bisq_network.png" />
         <span>Bisq</span>
       </a>
+      <a href="https://github.com/BlueWallet/BlueWallet" target="_blank" title="BlueWallet">
+        <img class="image" src="/resources/profile/bluewallet.png" />
+        <span>BlueWallet</span>
+      </a>
+      <a href="https://github.com/muun/apollo" target="_blank" title="Muun Wallet">
+        <img class="image" src="/resources/profile/muun.png" />
+        <span>Muun</span>
+      </a>
       <a href="https://github.com/spesmilo/electrum" target="_blank" title="Electrum Wallet">
-        <img class="image" src="/resources/profile/electrum.jpg" />
+        <img class="image" src="/resources/profile/electrum.png" />
         <span>Electrum</span>
       </a>
       <a href="https://github.com/cryptoadvance/specter-desktop" target="_blank" title="Specter Wallet">
@@ -244,18 +250,14 @@
         <img class="image" src="/resources/profile/phoenix.jpg" />
         <span>Phoenix</span>
       </a>
+      <a href="https://github.com/lnbits/lnbits-legend" target="_blank" title="LNbits">
+        <img class="image" src="/resources/profile/lnbits.svg" />
+        <span>LNBits</span>
+      </a>
       <a href="https://github.com/layer2tech/mercury-wallet" target="_blank" title="Mercury Wallet">
         <img class="image" src="/resources/profile/mercury.svg" />
         <span>Mercury</span>
       </a>
-      <a href="https://github.com/muun/apollo" target="_blank" title="Muun Wallet">
-        <img class="image" src="/resources/profile/muun.png" />
-        <span>Muun</span>
-      </a>
-      <a href="https://github.com/BlueWallet/BlueWallet" target="_blank" title="BlueWallet">
-        <img class="image" src="/resources/profile/bluewallet.png" />
-        <span>BlueWallet</span>
-      </a>
       <a href="https://github.com/hsjoberg/blixt-wallet" target="_blank" title="Blixt Wallet">
         <img class="image" src="/resources/profile/blixt.png" />
         <span>Blixt</span>

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

@@ -43,7 +43,6 @@
   .alliances,
   .enterprise-sponsor,
   .community-integrations-sponsor,
-  .selfhosted-integrations-sponsor,
   .maintainers {
     margin-top: 68px;
     margin-bottom: 68px;
@@ -117,7 +116,6 @@
   .community-sponsor,
   .project-translators,
   .community-integrations-sponsor,
-  .selfhosted-integrations-sponsor,
   .maintainers {
     .wrapper {
       display: inline-block;
@@ -193,6 +191,6 @@
 }
 
 .community-integrations-sponsor {
-  max-width: 830px;
+  max-width: 970px;
   margin: auto;
 }

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

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
 import { WebsocketService } from '../../services/websocket.service';
-import { SeoService } from 'src/app/services/seo.service';
-import { StateService } from 'src/app/services/state.service';
+import { SeoService } from '../../services/seo.service';
+import { StateService } from '../../services/state.service';
 import { Observable } from 'rxjs';
-import { ApiService } from 'src/app/services/api.service';
-import { IBackendInfo } from 'src/app/interfaces/websocket.interface';
+import { ApiService } from '../../services/api.service';
+import { IBackendInfo } from '../../interfaces/websocket.interface';
 import { Router } from '@angular/router';
 import { map } from 'rxjs/operators';
-import { ITranslators } from 'src/app/interfaces/node-api.interface';
+import { ITranslators } from '../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-about',

frontend/src/app/components/address-labels/address-labels.component.html

@@ -1,9 +1,16 @@
-<a *ngIf="channel; else default" [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">
-  <span
-    *ngIf="label"
-    class="badge badge-pill badge-warning"
-  >{{ label }}</span>
-</a>
+<ng-template [ngIf]="channel" [ngIfElse]="default">
+  <div>
+    <div class="badge-positioner">
+      <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">
+        <span 
+          *ngIf="label"
+          class="badge badge-pill badge-warning"
+        >{{ label }}</span>
+      </a>
+    </div>
+    &nbsp;
+  </div>
+</ng-template>
 
 <ng-template #default>
   <span

frontend/src/app/components/address-labels/address-labels.component.scss

@@ -1,3 +1,7 @@
 .badge {
   margin-right: 2px;
 }
+
+.badge-positioner {
+  position: absolute;
+}

frontend/src/app/components/address-labels/address-labels.component.ts

@@ -1,7 +1,7 @@
 import { Component, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
 import { Vin, Vout } from '../../interfaces/electrs.interface';
-import { StateService } from 'src/app/services/state.service';
-import { parseMultisigScript } from 'src/app/bitcoin.utils';
+import { StateService } from '../../services/state.service';
+import { parseMultisigScript } from '../../bitcoin.utils';
 
 @Component({
   selector: 'app-address-labels',

frontend/src/app/components/address/address-preview.component.html

@@ -1,5 +1,7 @@
 <div class="box preview-box" *ngIf="address && !error">
-  <h2 class="preview-header" i18n="shared.address">Address</h2>
+  <app-preview-title>
+    <span i18n="shared.address">Address</span>
+  </app-preview-title>
   <div class="row">
     <div class="col-md">
       <div class="row d-flex justify-content-between">

frontend/src/app/components/address/address-preview.component.ts

@@ -3,13 +3,13 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, filter, catchError, map, tap } from 'rxjs/operators';
 import { Address, Transaction } from '../../interfaces/electrs.interface';
-import { StateService } from 'src/app/services/state.service';
-import { OpenGraphService } from 'src/app/services/opengraph.service';
-import { AudioService } from 'src/app/services/audio.service';
-import { ApiService } from 'src/app/services/api.service';
+import { StateService } from '../../services/state.service';
+import { OpenGraphService } from '../../services/opengraph.service';
+import { AudioService } from '../../services/audio.service';
+import { ApiService } from '../../services/api.service';
 import { of, merge, Subscription, Observable } from 'rxjs';
-import { SeoService } from 'src/app/services/seo.service';
-import { AddressInformation } from 'src/app/interfaces/node-api.interface';
+import { SeoService } from '../../services/seo.service';
+import { AddressInformation } from '../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-address-preview',

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

@@ -3,13 +3,13 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, filter, catchError, map, tap } from 'rxjs/operators';
 import { Address, Transaction } from '../../interfaces/electrs.interface';
-import { WebsocketService } from 'src/app/services/websocket.service';
-import { StateService } from 'src/app/services/state.service';
-import { AudioService } from 'src/app/services/audio.service';
-import { ApiService } from 'src/app/services/api.service';
+import { WebsocketService } from '../../services/websocket.service';
+import { StateService } from '../../services/state.service';
+import { AudioService } from '../../services/audio.service';
+import { ApiService } from '../../services/api.service';
 import { of, merge, Subscription, Observable } from 'rxjs';
-import { SeoService } from 'src/app/services/seo.service';
-import { AddressInformation } from 'src/app/interfaces/node-api.interface';
+import { SeoService } from '../../services/seo.service';
+import { AddressInformation } from '../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-address',

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

@@ -1,8 +1,8 @@
 import { Location } from '@angular/common';
 import { Component, HostListener, OnInit, Inject, LOCALE_ID, HostBinding } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
-import { StateService } from 'src/app/services/state.service';
-import { OpenGraphService } from 'src/app/services/opengraph.service';
+import { StateService } from '../../services/state.service';
+import { OpenGraphService } from '../../services/opengraph.service';
 import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({

frontend/src/app/components/asset-circulation/asset-circulation.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { moveDec } from 'src/app/bitcoin.utils';
-import { AssetsService } from 'src/app/services/assets.service';
-import { ElectrsApiService } from 'src/app/services/electrs-api.service';
+import { moveDec } from '../../bitcoin.utils';
+import { AssetsService } from '../../services/assets.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
 import { environment } from 'src/environments/environment';
 
 @Component({

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

@@ -3,15 +3,15 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, filter, catchError, take } from 'rxjs/operators';
 import { Asset, Transaction } from '../../interfaces/electrs.interface';
-import { WebsocketService } from 'src/app/services/websocket.service';
-import { StateService } from 'src/app/services/state.service';
-import { AudioService } from 'src/app/services/audio.service';
-import { ApiService } from 'src/app/services/api.service';
+import { WebsocketService } from '../../services/websocket.service';
+import { StateService } from '../../services/state.service';
+import { AudioService } from '../../services/audio.service';
+import { ApiService } from '../../services/api.service';
 import { of, merge, Subscription, combineLatest } from 'rxjs';
-import { SeoService } from 'src/app/services/seo.service';
+import { SeoService } from '../../services/seo.service';
 import { environment } from 'src/environments/environment';
-import { AssetsService } from 'src/app/services/assets.service';
-import { moveDec } from 'src/app/bitcoin.utils';
+import { AssetsService } from '../../services/assets.service';
+import { moveDec } from '../../bitcoin.utils';
 
 @Component({
   selector: 'app-asset',

frontend/src/app/components/assets/asset-group/asset-group.component.ts

@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { combineLatest, Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
-import { ApiService } from 'src/app/services/api.service';
-import { AssetsService } from 'src/app/services/assets.service';
+import { ApiService } from '../../../services/api.service';
+import { AssetsService } from '../../../services/assets.service';
 
 @Component({
   selector: 'app-asset-group',

frontend/src/app/components/assets/assets-featured/assets-featured.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ApiService } from 'src/app/services/api.service';
+import { ApiService } from '../../../services/api.service';
 
 @Component({
   selector: 'app-assets-featured',

frontend/src/app/components/assets/assets-nav/assets-nav.component.ts

@@ -4,11 +4,11 @@ import { Router } from '@angular/router';
 import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
 import { merge, Observable, of, Subject } from 'rxjs';
 import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
-import { AssetExtended } from 'src/app/interfaces/electrs.interface';
-import { AssetsService } from 'src/app/services/assets.service';
-import { SeoService } from 'src/app/services/seo.service';
-import { StateService } from 'src/app/services/state.service';
-import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { AssetExtended } from '../../../interfaces/electrs.interface';
+import { AssetsService } from '../../../services/assets.service';
+import { SeoService } from '../../../services/seo.service';
+import { StateService } from '../../../services/state.service';
+import { RelativeUrlPipe } from '../../../shared/pipes/relative-url/relative-url.pipe';
 import { environment } from 'src/environments/environment';
 
 @Component({

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

@@ -1,13 +1,13 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { AssetsService } from 'src/app/services/assets.service';
+import { AssetsService } from '../../services/assets.service';
 import { environment } from 'src/environments/environment';
 import { FormGroup } from '@angular/forms';
 import { filter, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, Observable } from 'rxjs';
-import { AssetExtended } from 'src/app/interfaces/electrs.interface';
-import { SeoService } from 'src/app/services/seo.service';
-import { StateService } from 'src/app/services/state.service';
+import { AssetExtended } from '../../interfaces/electrs.interface';
+import { SeoService } from '../../services/seo.service';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-assets',

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

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
 import { Observable } from 'rxjs';
-import { LanguageService } from 'src/app/services/language.service';
-import { EnterpriseService } from 'src/app/services/enterprise.service';
+import { LanguageService } from '../../services/language.service';
+import { EnterpriseService } from '../../services/enterprise.service';
 
 @Component({
   selector: 'app-bisq-master-page',

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

@@ -2,11 +2,11 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, share, switchMap, tap } from 'rxjs/operators';
-import { BlockAudit, TransactionStripped } from 'src/app/interfaces/node-api.interface';
-import { ApiService } from 'src/app/services/api.service';
-import { StateService } from 'src/app/services/state.service';
-import { detectWebGL } from 'src/app/shared/graphs.utils';
-import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { BlockAudit, TransactionStripped } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { StateService } from '../../services/state.service';
+import { detectWebGL } from '../../shared/graphs.utils';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { BlockOverviewGraphComponent } from '../block-overview-graph/block-overview-graph.component';
 
 @Component({

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

@@ -2,16 +2,16 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, O
 import { EChartsOption } from 'echarts';
 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 { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-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 { selectPowerOfTen } from 'src/app/bitcoin.utils';
-import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
-import { StateService } from 'src/app/services/state.service';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
+import { StorageService } from '../../services/storage.service';
+import { MiningService } from '../../services/mining.service';
+import { selectPowerOfTen } from '../../bitcoin.utils';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '../../services/state.service';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({

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

@@ -2,15 +2,15 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit }
 import { EChartsOption, graphic } from 'echarts';
 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 { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
 import { formatCurrency, formatNumber, getCurrencySymbol } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-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 { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
+import { StorageService } from '../../services/storage.service';
+import { MiningService } from '../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
-import { FiatShortenerPipe } from 'src/app/shared/pipes/fiat-shortener.pipe';
+import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
 
 @Component({
   selector: 'app-block-fees-graph',

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

@@ -1,6 +1,6 @@
 <div class="block-overview-graph">
   <canvas class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
-  <div class="loader-wrapper" [class.hidden]="!isLoading">
+  <div class="loader-wrapper" [class.hidden]="!isLoading || disableSpinner">
     <div class="spinner-border ml-3 loading" role="status"></div>
   </div>
 

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

@@ -1,5 +1,5 @@
 import { Component, ElementRef, ViewChild, HostListener, Input, Output, EventEmitter, NgZone, AfterViewInit, OnDestroy } from '@angular/core';
-import { TransactionStripped } from 'src/app/interfaces/websocket.interface';
+import { TransactionStripped } from '../../interfaces/websocket.interface';
 import { FastVertexArray } from './fast-vertex-array';
 import BlockScene from './block-scene';
 import TxSprite from './tx-sprite';
@@ -17,6 +17,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
   @Input() blockLimit: number;
   @Input() orientation = 'left';
   @Input() flip = true;
+  @Input() disableSpinner = false;
   @Output() txClickEvent = new EventEmitter<TransactionStripped>();
   @Output() readyEvent = new EventEmitter();
 

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

@@ -1,6 +1,6 @@
 import { FastVertexArray } from './fast-vertex-array';
 import TxView from './tx-view';
-import { TransactionStripped } from 'src/app/interfaces/websocket.interface';
+import { TransactionStripped } from '../../interfaces/websocket.interface';
 import { Position, Square, ViewUpdateParams } from './sprite-types';
 
 export default class BlockScene {

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

@@ -1,8 +1,8 @@
 import TxSprite from './tx-sprite';
 import { FastVertexArray } from './fast-vertex-array';
-import { TransactionStripped } from 'src/app/interfaces/websocket.interface';
+import { TransactionStripped } from '../../interfaces/websocket.interface';
 import { SpriteUpdateParams, Square, Color, ViewUpdateParams } from './sprite-types';
-import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
+import { feeLevels, mempoolFeeColors } from '../../app.constants';
 
 const hoverTransitionTime = 300;
 const defaultHoverColor = hexToColor('1bd8f4');

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

@@ -1,6 +1,6 @@
 import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
-import { TransactionStripped } from 'src/app/interfaces/websocket.interface';
-import { Position } from 'src/app/components/block-overview-graph/sprite-types.js';
+import { TransactionStripped } from '../../interfaces/websocket.interface';
+import { Position } from '../../components/block-overview-graph/sprite-types.js';
 
 @Component({
   selector: 'app-block-overview-tooltip',

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

@@ -2,15 +2,15 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, O
 import { EChartsOption } from 'echarts';
 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 { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from 'src/app/shared/graphs.utils';
-import { StorageService } from 'src/app/services/storage.service';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
+import { StorageService } from '../../services/storage.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
-import { StateService } from 'src/app/services/state.service';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-block-prediction-graph',

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

@@ -2,15 +2,15 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit }
 import { EChartsOption, graphic } from 'echarts';
 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 { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
 import { formatCurrency, formatNumber, getCurrencySymbol } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-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 { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
+import { MiningService } from '../../services/mining.service';
+import { StorageService } from '../../services/storage.service';
 import { ActivatedRoute } from '@angular/router';
-import { FiatShortenerPipe } from 'src/app/shared/pipes/fiat-shortener.pipe';
+import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
 
 @Component({
   selector: 'app-block-rewards-graph',

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts

@@ -2,14 +2,14 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, H
 import { EChartsOption} from 'echarts';
 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 { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { StorageService } from 'src/app/services/storage.service';
-import { MiningService } from 'src/app/services/mining.service';
+import { StorageService } from '../../services/storage.service';
+import { MiningService } from '../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
-import { download, formatterXAxis } from 'src/app/shared/graphs.utils';
+import { download, formatterXAxis } from '../../shared/graphs.utils';
 
 @Component({
   selector: 'app-block-sizes-weights-graph',

frontend/src/app/components/block/block-preview.component.html

@@ -1,16 +1,21 @@
 <div class="box preview-box" *ngIf="!error">
-  <h2 class="preview-header" i18n="shared.block-title">Block</h2>
+  <app-preview-title>
+    <span i18n="shared.block-title">Block</span>
+  </app-preview-title>
   <div class="row">
     <div class="col-sm">
-      <div class="row d-flex justify-content-between">
-        <div class="title-wrapper">
+      <div class="row">
+        <div class="block-titles">
           <h1 class="title">
             <ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container></ng-template>
             <ng-template [ngIf]="blockHeight" i18n="shared.block-title">{{ blockHeight }}</ng-template>
           </h1>
+          <div class="blockhash" *ngIf="blockHash">
+            <h2 class="truncate right">{{ blockHash.slice(0,32) }}</h2>
+            <h2 class="truncate left">{{ blockHash.slice(32) }}</h2>
+          </div>
         </div>
       </div>
-      <a class="subtitle truncated" [routerLink]="['/block/' | relativeUrl, blockHash]"><span class="first">{{blockHash.slice(0,-4)}}</span><span class="last-four">{{blockHash.slice(-4)}}</span></a>
       <table class="table table-borderless table-striped">
         <tbody>
           <!-- <tr>
@@ -70,6 +75,7 @@
         [blockLimit]="stateService.blockVSize"
         [orientation]="'top'"
         [flip]="false"
+        [disableSpinner]="true"
         (readyEvent)="onGraphReady()"
       ></app-block-overview-graph>
     </div>

frontend/src/app/components/block/block-preview.component.scss

@@ -1,10 +1,47 @@
 .table {
   font-size: 32px;
-  margin-top: 6px;
+  margin-top: 36px;
 }
 
-.title-wrapper {
+.block-titles {
+  margin: 0;
   padding-left: 15px;
+  padding-right: 15px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  flex-grow: 1;
+
+  .title {
+    flex-shrink: 0;
+    flex-grow:  0;
+    margin-right: 30px;
+    font-size: 64px;
+  }
+
+  .blockhash {
+    width: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    font-family: Consolas,Liberation Mono,Courier New,monospace;
+    font-size: 32px;
+    text-align: right;
+
+    .truncate {
+      max-width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin: 0;
+
+      &.left {
+        direction: rtl;
+      }
+    }
+  }
 }
 
 .chart-container {

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

@@ -4,11 +4,11 @@ import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, tap, throttleTime, catchError, shareReplay, startWith, pairwise, filter } from 'rxjs/operators';
 import { of, Subscription, asyncScheduler } from 'rxjs';
 import { StateService } from '../../services/state.service';
-import { SeoService } from 'src/app/services/seo.service';
-import { OpenGraphService } from 'src/app/services/opengraph.service';
-import { BlockExtended, TransactionStripped } from 'src/app/interfaces/node-api.interface';
-import { ApiService } from 'src/app/services/api.service';
-import { BlockOverviewGraphComponent } from 'src/app/components/block-overview-graph/block-overview-graph.component';
+import { SeoService } from '../../services/seo.service';
+import { OpenGraphService } from '../../services/opengraph.service';
+import { BlockExtended, TransactionStripped } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
 
 @Component({
   selector: 'app-block-preview',

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

@@ -6,13 +6,13 @@ import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith,
 import { Transaction, Vout } from '../../interfaces/electrs.interface';
 import { Observable, of, Subscription, asyncScheduler, EMPTY } from 'rxjs';
 import { StateService } from '../../services/state.service';
-import { SeoService } from 'src/app/services/seo.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
-import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
-import { BlockExtended, TransactionStripped } from 'src/app/interfaces/node-api.interface';
-import { ApiService } from 'src/app/services/api.service';
-import { BlockOverviewGraphComponent } from 'src/app/components/block-overview-graph/block-overview-graph.component';
-import { detectWebGL } from 'src/app/shared/graphs.utils';
+import { SeoService } from '../../services/seo.service';
+import { WebsocketService } from '../../services/websocket.service';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { BlockExtended, TransactionStripped } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
+import { detectWebGL } from '../../shared/graphs.utils';
 
 @Component({
   selector: 'app-block',

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

@@ -1,8 +1,8 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
-import { StateService } from 'src/app/services/state.service';
-import { specialBlocks } from 'src/app/app.constants';
-import { BlockExtended } from 'src/app/interfaces/node-api.interface';
+import { StateService } from '../../services/state.service';
+import { specialBlocks } from '../../app.constants';
+import { BlockExtended } from '../../interfaces/node-api.interface';
 import { Location } from '@angular/common';
 import { config } from 'process';
 

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-blockchain',

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

@@ -1,10 +1,10 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
 import { BehaviorSubject, combineLatest, concat, Observable, timer } from 'rxjs';
 import { delayWhen, map, retryWhen, scan, skip, switchMap, tap } from 'rxjs/operators';
-import { BlockExtended } from 'src/app/interfaces/node-api.interface';
-import { ApiService } from 'src/app/services/api.service';
-import { StateService } from 'src/app/services/state.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { BlockExtended } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-blocks-list',

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.components.ts

@@ -1,10 +1,10 @@
 import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { ApiService } from 'src/app/services/api.service';
+import { ApiService } from '../../services/api.service';
 import { formatNumber } from '@angular/common';
-import { selectPowerOfTen } from 'src/app/bitcoin.utils';
-import { StateService } from 'src/app/services/state.service';
+import { selectPowerOfTen } from '../../bitcoin.utils';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-difficulty-adjustments-table',

frontend/src/app/components/fees-box/fees-box.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
+import { StateService } from '../../services/state.service';
 import { Observable } from 'rxjs';
-import { Recommendedfees } from 'src/app/interfaces/websocket.interface';
-import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
+import { Recommendedfees } from '../../interfaces/websocket.interface';
+import { feeLevels, mempoolFeeColors } from '../../app.constants';
 import { tap } from 'rxjs/operators';
 
 @Component({

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

@@ -1,8 +1,8 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
+import { StateService } from '../../services/state.service';
 import { Observable, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { MempoolInfo } from 'src/app/interfaces/websocket.interface';
+import { MempoolInfo } from '../../interfaces/websocket.interface';
 
 interface MempoolBlocksData {
   blocks: number;

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

@@ -1,6 +1,6 @@
-import { Component, OnInit } from "@angular/core";
-import { StateService } from "src/app/services/state.service";
-import { WebsocketService } from "src/app/services/websocket.service";
+import { Component, OnInit } from '@angular/core';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-graphs',

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

@@ -2,16 +2,16 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, H
 import { EChartsOption, graphic } from 'echarts';
 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 { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { selectPowerOfTen } from 'src/app/bitcoin.utils';
-import { StorageService } from 'src/app/services/storage.service';
-import { MiningService } from 'src/app/services/mining.service';
-import { download } from 'src/app/shared/graphs.utils';
+import { selectPowerOfTen } from '../../bitcoin.utils';
+import { StorageService } from '../../services/storage.service';
+import { MiningService } from '../../services/mining.service';
+import { download } from '../../shared/graphs.utils';
 import { ActivatedRoute } from '@angular/router';
-import { StateService } from 'src/app/services/state.service';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-hashrate-chart',

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

@@ -2,13 +2,13 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, L
 import { EChartsOption } from 'echarts';
 import { Observable } from 'rxjs';
 import { delay, map, retryWhen, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from 'src/app/services/api.service';
-import { SeoService } from 'src/app/services/seo.service';
+import { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { poolsColor } from 'src/app/app.constants';
-import { StorageService } from 'src/app/services/storage.service';
-import { MiningService } from 'src/app/services/mining.service';
-import { download } from 'src/app/shared/graphs.utils';
+import { poolsColor } from '../../app.constants';
+import { StorageService } from '../../services/storage.service';
+import { MiningService } from '../../services/mining.service';
+import { download } from '../../shared/graphs.utils';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { EChartsOption } from 'echarts';
 import { OnChanges } from '@angular/core';
-import { StorageService } from 'src/app/services/storage.service';
-import { download, formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
+import { StorageService } from '../../services/storage.service';
+import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/graphs.utils';
 import { formatNumber } from '@angular/common';
 
 @Component({

frontend/src/app/components/language-selector/language-selector.component.ts

@@ -1,8 +1,8 @@
 import { DOCUMENT } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { languages } from 'src/app/app.constants';
-import { LanguageService } from 'src/app/services/language.service';
+import { languages } from '../../app.constants';
+import { LanguageService } from '../../services/language.service';
 
 @Component({
   selector: 'app-language-selector',

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

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
 import { merge, Observable, of} from 'rxjs';
-import { LanguageService } from 'src/app/services/language.service';
-import { EnterpriseService } from 'src/app/services/enterprise.service';
+import { LanguageService } from '../../services/language.service';
+import { EnterpriseService } from '../../services/enterprise.service';
 
 @Component({
   selector: 'app-liquid-master-page',

frontend/src/app/components/loading-indicator/loading-indicator.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { StateService } from 'src/app/services/state.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-loading-indicator',

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

@@ -10,8 +10,8 @@
       <span *ngSwitchCase="'signet'" class="network signet"><app-svg-images name="signet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Signet</span>
       <span *ngSwitchCase="'testnet'" class="network testnet"><app-svg-images name="testnet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Testnet</span>
       <span *ngSwitchCase="'bisq'" class="network bisq"><app-svg-images name="bisq" width="35" height="35" viewBox="0 0 75 75" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Bisq</span>
-      <span *ngSwitchCase="'liquid'" class="network liquid"><app-svg-images name="liquid" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Liquid</span>
-      <span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><app-svg-images name="liquidtestnet" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</span>
+      <span *ngSwitchCase="'liquid'" class="network liquid"><app-svg-images name="liquid" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Mainnet</span>
+      <span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><app-svg-images name="liquidtestnet" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Testnet</span>
       <span *ngSwitchDefault class="network mainnet"><app-svg-images name="bitcoin" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Mainnet</span>
     </div>
   </header>

frontend/src/app/components/master-page-preview/master-page-preview.component.scss

@@ -47,6 +47,7 @@
     z-index: 101;
     line-height: 80px;
     text-transform: capitalize;
+    font-size: 2.4rem;
   }
 
   ::ng-deep .title {

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { StateService } from '../../services/state.service';
 import { Observable, merge, of } from 'rxjs';
-import { LanguageService } from 'src/app/services/language.service';
+import { LanguageService } from '../../services/language.service';
 
 @Component({
   selector: 'app-master-page-preview',

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

@@ -0,0 +1,11 @@
+<h2 class="preview-header">
+  <ng-container *ngIf="{ val: network$ | async } as network">
+    <ng-container [ngSwitch]="network.val">
+      <span *ngSwitchCase="'bisq'">Bisq </span>
+      <span *ngSwitchCase="'liquid'">Liquid </span>
+      <span *ngSwitchCase="'liquidtestnet'">Liquid </span>
+      <span *ngSwitchDefault>Bitcoin </span>
+    </ng-container>
+  </ng-container>
+  <ng-content></ng-content>
+</h2>

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

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { StateService } from '../../services/state.service';
+import { Observable, merge, of } from 'rxjs';
+
+@Component({
+  selector: 'app-preview-title',
+  templateUrl: './preview-title.component.html',
+  styleUrls: [],
+})
+export class PreviewTitleComponent implements OnInit {
+  network$: Observable<string>;
+
+  constructor(
+    public stateService: StateService,
+  ) { }
+
+  ngOnInit() {
+    this.network$ = merge(of(''), this.stateService.networkChanged$);
+  }
+}

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

@@ -1,8 +1,8 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
 import { Observable, merge, of } from 'rxjs';
-import { LanguageService } from 'src/app/services/language.service';
-import { EnterpriseService } from 'src/app/services/enterprise.service';
+import { LanguageService } from '../../services/language.service';
+import { EnterpriseService } from '../../services/enterprise.service';
 
 @Component({
   selector: 'app-master-page',

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

@@ -1,12 +1,12 @@
 import { Component, ComponentRef, ViewChild, HostListener, Input, Output, EventEmitter,
   OnDestroy, OnChanges, ChangeDetectionStrategy, AfterViewInit } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
-import { MempoolBlockDelta, TransactionStripped } from 'src/app/interfaces/websocket.interface';
-import { BlockOverviewGraphComponent } from 'src/app/components/block-overview-graph/block-overview-graph.component';
+import { StateService } from '../../services/state.service';
+import { MempoolBlockDelta, TransactionStripped } from '../../interfaces/websocket.interface';
+import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
 import { Subscription, BehaviorSubject, merge, of } from 'rxjs';
 import { switchMap, filter } from 'rxjs/operators';
-import { WebsocketService } from 'src/app/services/websocket.service';
-import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { WebsocketService } from '../../services/websocket.service';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { Router } from '@angular/router';
 
 @Component({

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
+import { StateService } from '../../services/state.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { switchMap, map, tap, filter } from 'rxjs/operators';
-import { MempoolBlock, TransactionStripped } from 'src/app/interfaces/websocket.interface';
+import { MempoolBlock, TransactionStripped } from '../../interfaces/websocket.interface';
 import { Observable, BehaviorSubject } from 'rxjs';
-import { SeoService } from 'src/app/services/seo.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { SeoService } from '../../services/seo.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-mempool-block',

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

@@ -1,14 +1,14 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
 import { Subscription, Observable, fromEvent, merge, of, combineLatest, timer } from 'rxjs';
-import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
-import { StateService } from 'src/app/services/state.service';
+import { MempoolBlock } from '../../interfaces/websocket.interface';
+import { StateService } from '../../services/state.service';
 import { Router } from '@angular/router';
 import { take, map, switchMap } from 'rxjs/operators';
-import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
-import { specialBlocks } from 'src/app/app.constants';
-import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { feeLevels, mempoolFeeColors } from '../../app.constants';
+import { specialBlocks } from '../../app.constants';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { Location } from '@angular/common';
-import { DifficultyAdjustment } from 'src/app/interfaces/node-api.interface';
+import { DifficultyAdjustment } from '../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-mempool-blocks',

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

@@ -1,12 +1,12 @@
 import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
-import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
+import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe';
 import { formatNumber } from '@angular/common';
-import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
-import { StateService } from 'src/app/services/state.service';
-import { StorageService } from 'src/app/services/storage.service';
+import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
+import { StateService } from '../../services/state.service';
+import { StorageService } from '../../services/storage.service';
 import { EChartsOption } from 'echarts';
-import { feeLevels, chartColors } from 'src/app/app.constants';
-import { download, formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
+import { feeLevels, chartColors } from '../../app.constants';
+import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/graphs.utils';
 
 @Component({
   selector: 'app-mempool-graph',

frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { SeoService } from 'src/app/services/seo.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { SeoService } from '../../services/seo.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-mining-dashboard',

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

@@ -4,15 +4,15 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { EChartsOption, PieSeriesOption } from 'echarts';
 import { concat, Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { SinglePoolStats } from 'src/app/interfaces/node-api.interface';
-import { SeoService } from 'src/app/services/seo.service';
+import { SinglePoolStats } from '../../interfaces/node-api.interface';
+import { SeoService } from '../../services/seo.service';
 import { StorageService } from '../..//services/storage.service';
 import { MiningService, MiningStats } from '../../services/mining.service';
 import { StateService } from '../../services/state.service';
-import { chartColors, poolsColor } from 'src/app/app.constants';
-import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
-import { download } from 'src/app/shared/graphs.utils';
-import { isMobile } from 'src/app/shared/common.utils';
+import { chartColors, poolsColor } from '../../app.constants';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { download } from '../../shared/graphs.utils';
+import { isMobile } from '../../shared/common.utils';
 
 @Component({
   selector: 'app-pool-ranking',

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

@@ -0,0 +1,34 @@
+<div class="box preview-box" *ngIf="poolStats$ | async as poolStats">
+  <app-preview-title>
+    <span i18n="mining.pools">mining pool</span>
+  </app-preview-title>
+  <div class="row d-flex justify-content-between full-width-row">
+    <div class="title-wrapper">
+      <h1 class="title">{{ poolStats.pool.name }}</h1>
+    </div>
+    <div class="logo-wrapper">
+      <img width="62" height="62" src="/resources/mining-pools/default.svg">
+      <img [class.noimg]="!imageLoaded" width="62" height="62" src="{{ poolStats['logo'] }}"
+        (load)="onImageLoad()" (error)="onImageFail()">
+    </div>
+  </div>
+  <div class="row full-width-row">
+      <div class="stats">
+        <div class="stat-box">
+          <div class="label" i18n="mining.tags">Tags</div>
+          <div *ngIf="poolStats.pool.regexes.length else nodata" class="data">{{ poolStats.pool.regexes }}</div>
+        </div>
+        <div class="stat-box">
+          <div class="label" i18n="mining.hashrate">Hashrate</div>
+          <div class="data">{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }}</div>
+        </div>
+      </div>
+  </div>
+  <div class="row hash-chart full-width-row">
+    <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartFinished)="onChartReady()"></div>
+  </div>
+</div>
+
+<ng-template #nodata>
+  <div>~</div>
+</ng-template>

frontend/src/app/components/pool/pool-preview.component.scss

@@ -0,0 +1,78 @@
+.stats {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 100%;
+  margin: 15px 0;
+  font-size: 32px;
+  overflow: hidden;
+
+  .stat-box {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: baseline;
+    justify-content: space-between;
+    width: 100%;
+    margin-left: 15px;
+    background: #181b2d;
+    padding: 0.75rem;
+    width: 0;
+    flex-grow: 1;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    .label {
+      flex-shrink: 0;
+      flex-grow: 0;
+      margin-right: 1em;
+    }
+    .data {
+      flex-shrink: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.chart {
+  width: 100%;
+  height: 315px;
+  background: #181b2d;
+}
+
+.row {
+  margin-right: 0;
+}
+
+.full-width-row {
+  padding-left: 15px;
+  flex-wrap: nowrap;
+}
+
+.logo-wrapper {
+  position: relative;
+  width: 62px;
+  height: 62px;
+  margin-left: 1em;
+
+  img {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: #24273e;
+
+    &.noimg {
+      opacity: 0;
+    }
+  }
+}
+
+::ng-deep .symbol {
+  font-size: 24px;
+}

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

@@ -0,0 +1,187 @@
+import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { EChartsOption, graphic } from 'echarts';
+import { Observable, of } from 'rxjs';
+import { map, switchMap, catchError } from 'rxjs/operators';
+import { PoolStat } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { StateService } from '../../services/state.service';
+import { formatNumber } from '@angular/common';
+import { SeoService } from '../../services/seo.service';
+import { OpenGraphService } from '../../services/opengraph.service';
+
+@Component({
+  selector: 'app-pool-preview',
+  templateUrl: './pool-preview.component.html',
+  styleUrls: ['./pool-preview.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PoolPreviewComponent implements OnInit {
+  formatNumber = formatNumber;
+  poolStats$: Observable<PoolStat>;
+  isLoading = true;
+  imageLoaded = false;
+  lastImgSrc: string = '';
+
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+
+  slug: string = undefined;
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private apiService: ApiService,
+    private route: ActivatedRoute,
+    public stateService: StateService,
+    private seoService: SeoService,
+    private openGraphService: OpenGraphService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.poolStats$ = this.route.params.pipe(map((params) => params.slug))
+      .pipe(
+        switchMap((slug: any) => {
+          this.isLoading = true;
+          this.imageLoaded = false;
+          this.slug = slug;
+          this.openGraphService.waitFor('pool-hash-' + this.slug);
+          this.openGraphService.waitFor('pool-stats-' + this.slug);
+          this.openGraphService.waitFor('pool-chart-' + this.slug);
+          this.openGraphService.waitFor('pool-img-' + this.slug);
+          return this.apiService.getPoolHashrate$(this.slug)
+            .pipe(
+              switchMap((data) => {
+                this.isLoading = false;
+                this.prepareChartOptions(data.map(val => [val.timestamp * 1000, val.avgHashrate]));
+                this.openGraphService.waitOver('pool-hash-' + this.slug);
+                return [slug];
+              }),
+              catchError(() => {
+                this.isLoading = false;
+                this.openGraphService.fail('pool-hash-' + this.slug);
+                return of([slug]);
+              })
+            );
+        }),
+        switchMap((slug) => {
+          return this.apiService.getPoolStats$(slug).pipe(
+            catchError(() => {
+              this.isLoading = false;
+              this.openGraphService.fail('pool-stats-' + this.slug);
+              return of(null);
+            })
+          );
+        }),
+        map((poolStats) => {
+          if (poolStats == null) {
+            return null;
+          }
+
+          this.seoService.setTitle(poolStats.pool.name);
+          let regexes = '"';
+          for (const regex of poolStats.pool.regexes) {
+            regexes += regex + '", "';
+          }
+          poolStats.pool.regexes = regexes.slice(0, -3);
+          poolStats.pool.addresses = poolStats.pool.addresses;
+
+          if (poolStats.reportedHashrate) {
+            poolStats.luck = poolStats.estimatedHashrate / poolStats.reportedHashrate * 100;
+          }
+
+          this.openGraphService.waitOver('pool-stats-' + this.slug);
+
+          const logoSrc = `/resources/mining-pools/` + poolStats.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
+          if (logoSrc === this.lastImgSrc) {
+            this.openGraphService.waitOver('pool-img-' + this.slug);
+          }
+          this.lastImgSrc = logoSrc;
+          return Object.assign({
+            logo: logoSrc
+          }, poolStats);
+        }),
+        catchError(() => {
+          this.isLoading = false;
+          this.openGraphService.fail('pool-stats-' + this.slug);
+          return of(null);
+        })
+      );
+  }
+
+  prepareChartOptions(data) {
+    let title: object;
+    if (data.length === 0) {
+      title = {
+        textStyle: {
+          color: 'grey',
+          fontSize: 15
+        },
+        text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`,
+        left: 'center',
+        top: 'center'
+      };
+    }
+
+    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' }
+        ]),
+        '#D81B60',
+      ],
+      grid: {
+        left: 15,
+        right: 15,
+        bottom: 15,
+        top: 15,
+        show: false,
+      },
+      xAxis: data.length === 0 ? undefined : {
+        type: 'time',
+        show: false,
+      },
+      yAxis: data.length === 0 ? undefined : [
+        {
+          type: 'value',
+          show: false,
+        },
+      ],
+      series: data.length === 0 ? undefined : [
+        {
+          zlevel: 0,
+          name: 'Hashrate',
+          showSymbol: false,
+          symbol: 'none',
+          data: data,
+          type: 'line',
+          lineStyle: {
+            width: 4,
+          },
+        },
+      ],
+    };
+  }
+
+  onChartReady(): void {
+    this.openGraphService.waitOver('pool-chart-' + this.slug);
+  }
+
+  onImageLoad(): void {
+    this.imageLoaded = true;
+    this.openGraphService.waitOver('pool-img-' + this.slug);
+  }
+
+  onImageFail(): void {
+    this.imageLoaded = false;
+    this.openGraphService.waitOver('pool-img-' + this.slug);
+  }
+}

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

@@ -3,12 +3,12 @@ import { ActivatedRoute } from '@angular/router';
 import { EChartsOption, graphic } from 'echarts';
 import { BehaviorSubject, Observable, timer } from 'rxjs';
 import { distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
-import { BlockExtended, PoolStat } from 'src/app/interfaces/node-api.interface';
-import { ApiService } from 'src/app/services/api.service';
-import { StateService } from 'src/app/services/state.service';
-import { selectPowerOfTen } from 'src/app/bitcoin.utils';
+import { BlockExtended, PoolStat } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { StateService } from '../../services/state.service';
+import { selectPowerOfTen } from '../../bitcoin.utils';
 import { formatNumber } from '@angular/common';
-import { SeoService } from 'src/app/services/seo.service';
+import { SeoService } from '../../services/seo.service';
 
 @Component({
   selector: 'app-pool',

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { ApiService } from 'src/app/services/api.service';
+import { ApiService } from '../../services/api.service';
 
 @Component({
   selector: 'app-push-transaction',

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

@@ -1,6 +1,6 @@
 import { Component, Input, AfterViewInit, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';
 import * as QRCode from 'qrcode';
-import { StateService } from 'src/app/services/state.service';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-qrcode',

frontend/src/app/components/reward-stats/reward-stats.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { concat, Observable } from 'rxjs';
 import { map, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from 'src/app/services/api.service';
-import { StateService } from 'src/app/services/state.service';
+import { ApiService } from '../../services/api.service';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-reward-stats',

frontend/src/app/components/search-form/search-form.component.html

@@ -3,7 +3,7 @@
     <div class="search-box-container mr-2">
       <input (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="Search the full Bitcoin ecosystem">
       
-      <app-search-results #searchResults [results]="typeAhead$ | async" [searchTerm]="searchForm.get('searchText').value" (selectedResult)="selectedResult($event)"></app-search-results>
+      <app-search-results #searchResults [results]="typeAhead$ | async" (selectedResult)="selectedResult($event)"></app-search-results>
     
     </div>
     <div>

frontend/src/app/components/search-form/search-form.component.ts

@@ -1,13 +1,13 @@
 import { Component, OnInit, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, HostListener } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { AssetsService } from 'src/app/services/assets.service';
-import { StateService } from 'src/app/services/state.service';
+import { AssetsService } from '../../services/assets.service';
+import { StateService } from '../../services/state.service';
 import { Observable, of, Subject, zip, BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap, catchError, map } from 'rxjs/operators';
-import { ElectrsApiService } from 'src/app/services/electrs-api.service';
-import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
-import { ApiService } from 'src/app/services/api.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { ApiService } from '../../services/api.service';
 import { SearchResultsComponent } from './search-results/search-results.component';
 
 @Component({
@@ -74,6 +74,7 @@ export class SearchFormComponent implements OnInit {
         switchMap((text) => {
           if (!text.length) {
             return of([
+              '',
               [],
               {
                 nodes: [],
@@ -84,11 +85,14 @@ export class SearchFormComponent implements OnInit {
           this.isTypeaheading$.next(true);
           if (!this.stateService.env.LIGHTNING) {
             return zip(
+              of(text),
               this.electrsApiService.getAddressesByPrefix$(text).pipe(catchError(() => of([]))),
-              [{ nodes: [], channels: [] }]
+              [{ nodes: [], channels: [] }],
+              of(this.regexBlockheight.test(text)),
             );
           }
           return zip(
+            of(text),
             this.electrsApiService.getAddressesByPrefix$(text).pipe(catchError(() => of([]))),
             this.apiService.lightningSearch$(text).pipe(catchError(() => of({
               nodes: [],
@@ -102,10 +106,12 @@ export class SearchFormComponent implements OnInit {
             return result[0].map((address: string) => 'B' + address);
           }
           return {
-            addresses: result[0],
-            nodes: result[1].nodes,
-            channels: result[1].channels,
-            totalResults: result[0].length + result[1].nodes.length + result[1].channels.length,
+            searchText: result[0],
+            blockHeight: this.regexBlockheight.test(result[0]) ? [parseInt(result[0], 10)] : [],
+            addresses: result[1],
+            nodes: result[2].nodes,
+            channels: result[2].channels,
+            totalResults: result[1].length + result[2].nodes.length + result[2].channels.length,
           };
         })
       );
@@ -121,6 +127,8 @@ export class SearchFormComponent implements OnInit {
   selectedResult(result: any) {
     if (typeof result === 'string') {
       this.search(result);
+    } else if (typeof result === 'number') {
+      this.navigate('/block/', result.toString());
     } else if (result.alias) {
       this.navigate('/lightning/node/', result.public_key);
     } else if (result.short_id) {

frontend/src/app/components/search-form/search-results/search-results.component.html

@@ -1,25 +1,31 @@
-<div class="dropdown-menu show" *ngIf="results" [hidden]="!results.addresses.length && !results.nodes.length && !results.channels.length">
+<div class="dropdown-menu show" *ngIf="results" [hidden]="!results.blockHeight.length && !results.addresses.length && !results.nodes.length && !results.channels.length">
+  <ng-template [ngIf]="results.blockHeight.length">
+    <div class="card-title">Bitcoin Block Height</div>
+    <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
+      Go to "{{ results.searchText }}"
+    </button>
+  </ng-template>
   <ng-template [ngIf]="results.addresses.length">
     <div class="card-title" *ngIf="stateService.env.LIGHTNING">Bitcoin Addresses</div>
     <ng-template ngFor [ngForOf]="results.addresses" let-address let-i="index">
-      <button (click)="clickItem(i)" [class.active]="i === activeIdx" type="button" role="option" class="dropdown-item">
-        <ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="searchTerm"></ngb-highlight>
+      <button (click)="clickItem(results.blockHeight.length + i)" [class.active]="(results.blockHeight.length + i) === activeIdx" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="results.searchText"></ngb-highlight>
       </button>
     </ng-template>
   </ng-template>
   <ng-template [ngIf]="results.nodes.length">
     <div class="card-title">Lightning Nodes</div>
     <ng-template ngFor [ngForOf]="results.nodes" let-node let-i="index">
-      <button (click)="clickItem(results.addresses.length + i)" [class.inactive]="node.status === 0" [class.active]="results.addresses.length + i === activeIdx" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" type="button" role="option" class="dropdown-item">
-        <ngb-highlight [result]="node.alias" [term]="searchTerm"></ngb-highlight> &nbsp;<span class="symbol">{{ node.public_key | shortenString : 10 }}</span>
+      <button (click)="clickItem(results.blockHeight.length + results.addresses.length + i)" [class.inactive]="node.status === 0" [class.active]="results.blockHeight.length + results.addresses.length + i === activeIdx" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="node.alias" [term]="results.searchText"></ngb-highlight> &nbsp;<span class="symbol">{{ node.public_key | shortenString : 10 }}</span>
       </button>
     </ng-template>
   </ng-template>
   <ng-template [ngIf]="results.channels.length">
     <div class="card-title">Lightning Channels</div>
     <ng-template ngFor [ngForOf]="results.channels" let-channel let-i="index">
-      <button (click)="clickItem(results.addresses.length + results.nodes.length + i)" [class.inactive]="channel.status === 2"  [class.active]="results.addresses.length + results.nodes.length + i === activeIdx" type="button" role="option" class="dropdown-item">
-        <ngb-highlight [result]="channel.short_id" [term]="searchTerm"></ngb-highlight> &nbsp;<span class="symbol">{{ channel.id }}</span>
+      <button (click)="clickItem(results.blockHeight.length + results.addresses.length + results.nodes.length + i)" [class.inactive]="channel.status === 2"  [class.active]="results.blockHeight.length + results.addresses.length + results.nodes.length + i === activeIdx" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="channel.short_id" [term]="results.searchText"></ngb-highlight> &nbsp;<span class="symbol">{{ channel.id }}</span>
       </button>
     </ng-template>
   </ng-template>

frontend/src/app/components/search-form/search-results/search-results.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
+import { StateService } from '../../../services/state.service';
 
 @Component({
   selector: 'app-search-results',
@@ -8,7 +8,6 @@ import { StateService } from 'src/app/services/state.service';
 })
 export class SearchResultsComponent implements OnChanges {
   @Input() results: any = {};
-  @Input() searchTerm = '';
   @Output() selectedResult = new EventEmitter();
 
   isMobile = (window.innerWidth <= 767.98);
@@ -16,12 +15,14 @@ export class SearchResultsComponent implements OnChanges {
   activeIdx = 0;
   focusFirst = true;
 
-  constructor(public stateService: StateService) { }
+  constructor(
+    public stateService: StateService,
+    ) { }
 
   ngOnChanges() {
     this.activeIdx = 0;
     if (this.results) {
-      this.resultsFlattened = [...this.results.addresses, ...this.results.nodes, ...this.results.channels];
+      this.resultsFlattened = [...this.results.blockHeight, ...this.results.addresses, ...this.results.nodes, ...this.results.channels];
     }
   }
 
@@ -47,7 +48,7 @@ export class SearchResultsComponent implements OnChanges {
         if (this.resultsFlattened[this.activeIdx]) {
           this.selectedResult.emit(this.resultsFlattened[this.activeIdx]);
         } else {
-          this.selectedResult.emit(this.searchTerm);
+          this.selectedResult.emit(this.results.searchText);
         }
         this.results = null;
         break;

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

@@ -1,6 +1,6 @@
 import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
-import { specialBlocks } from 'src/app/app.constants';
+import { StateService } from '../../services/state.service';
+import { specialBlocks } from '../../app.constants';
 
 @Component({
   selector: 'app-start',

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

@@ -8,10 +8,10 @@ import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
 import { WebsocketService } from '../../services/websocket.service';
 import { ApiService } from '../../services/api.service';
 
-import { StateService } from 'src/app/services/state.service';
-import { SeoService } from 'src/app/services/seo.service';
-import { StorageService } from 'src/app/services/storage.service';
-import { feeLevels, chartColors } from 'src/app/app.constants';
+import { StateService } from '../../services/state.service';
+import { SeoService } from '../../services/seo.service';
+import { StorageService } from '../../services/storage.service';
+import { feeLevels, chartColors } from '../../app.constants';
 import { MempoolGraphComponent } from '../mempool-graph/mempool-graph.component';
 import { IncomingTransactionsGraphComponent } from '../incoming-transactions-graph/incoming-transactions-graph.component';
 

frontend/src/app/components/status-view/status-view.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-status-view',

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

@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { WebsocketService } from '../../services/websocket.service';
 import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
-import { StateService } from 'src/app/services/state.service';
-import { ApiService } from 'src/app/services/api.service';
-import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from '../../services/state.service';
+import { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
 import { ActivatedRoute } from '@angular/router';
 import { map, scan, startWith, switchMap, tap } from 'rxjs/operators';
 import { interval, merge, Observable } from 'rxjs';

frontend/src/app/components/time-since/time-since.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
-import { dates } from 'src/app/shared/i18n/dates';
+import { StateService } from '../../services/state.service';
+import { dates } from '../../shared/i18n/dates';
 
 @Component({
   selector: 'app-time-since',

frontend/src/app/components/time-span/time-span.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
-import { dates } from 'src/app/shared/i18n/dates';
+import { StateService } from '../../services/state.service';
+import { dates } from '../../shared/i18n/dates';
 
 @Component({
   selector: 'app-time-span',

frontend/src/app/components/time-until/time-until.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
-import { dates } from 'src/app/shared/i18n/dates';
+import { StateService } from '../../services/state.service';
+import { dates } from '../../shared/i18n/dates';
 
 @Component({
   selector: 'app-time-until',

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

@@ -1,5 +1,7 @@
 <div class="box preview-box" *ngIf="tx && !error">
-  <h2 class="preview-header" i18n="shared.transaction">Transaction</h2>
+  <app-preview-title>
+    <span i18n="shared.transaction">Transaction</span>
+  </app-preview-title>
   <div class="row d-flex justify-content-between full-width-row">
     <div class="title-wrapper">
       <h1 class="title truncated"><span class="first">{{txId.slice(0,-4)}}</span><span class="last-four">{{txId.slice(-4)}}</span></h1>

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

@@ -11,10 +11,10 @@ import {
 import { Transaction, Vout } from '../../interfaces/electrs.interface';
 import { of, merge, Subscription, Observable, Subject, from } from 'rxjs';
 import { StateService } from '../../services/state.service';
-import { OpenGraphService } from 'src/app/services/opengraph.service';
-import { ApiService } from 'src/app/services/api.service';
-import { SeoService } from 'src/app/services/seo.service';
-import { CpfpInfo } from 'src/app/interfaces/node-api.interface';
+import { OpenGraphService } from '../../services/opengraph.service';
+import { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
+import { CpfpInfo } from '../../interfaces/node-api.interface';
 import { LiquidUnblinding } from './liquid-ublinding';
 
 @Component({

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

@@ -190,6 +190,24 @@
 
     <br>
 
+    <div class="title">
+      <h2 i18n="transaction.diagram|Transaction diagram">Diagram</h2>
+    </div>
+
+    <div class="box">
+      <div class="graph-container" #graphContainer>
+        <tx-bowtie-graph [tx]="tx" [width]="graphWidth" [height]="graphExpanded ? (maxInOut * 15) : graphHeight" [maxStrands]="graphExpanded ? maxInOut : 24" [network]="network" [tooltip]="true"></tx-bowtie-graph>
+      </div>
+      <div class="toggle-wrapper" *ngIf="maxInOut > 24">
+        <button class="btn btn-sm btn-primary graph-toggle" (click)="expandGraph();" *ngIf="!graphExpanded; else collapseBtn"><span i18n="show-more">Show more</span></button>
+        <ng-template #collapseBtn>
+          <button class="btn btn-sm btn-primary graph-toggle" (click)="collapseGraph();"><span i18n="show-less">Show less</span></button>
+        </ng-template>
+      </div>
+    </div>
+
+    <br>
+
     <div class="title float-left">
       <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
     </div>
@@ -283,6 +301,36 @@
 
     <br>
 
+    <div class="title">
+      <h2 i18n="transaction.diagram|Transaction diagram">Diagram</h2>
+    </div>
+
+    <div class="box">
+      <div class="graph-container" #graphContainer style="visibility: hidden;"></div>
+      <div class="row">
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <br>
+
     <div class="title">
       <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
     </div>

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

@@ -73,6 +73,24 @@
 	}
 }
 
+.graph-container {
+  position: relative;
+  width: 100%;
+  background: #181b2d;
+  padding: 10px;
+  padding-bottom: 0;
+}
+
+.toggle-wrapper {
+  width: 100%;
+  text-align: center;
+  margin: 1.25em 0 0;
+}
+
+.graph-toggle {
+  margin: auto;
+}
+
 @media (max-width: 767.98px) {
 	.mobile-bottomcol {
 		margin-top: 15px;

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, AfterViewInit, OnDestroy, HostListener, ViewChild, ElementRef } from '@angular/core';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import {
@@ -13,10 +13,10 @@ import { Transaction } from '../../interfaces/electrs.interface';
 import { of, merge, Subscription, Observable, Subject, timer, combineLatest, from } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from '../../services/websocket.service';
-import { AudioService } from 'src/app/services/audio.service';
-import { ApiService } from 'src/app/services/api.service';
-import { SeoService } from 'src/app/services/seo.service';
-import { BlockExtended, CpfpInfo } from 'src/app/interfaces/node-api.interface';
+import { AudioService } from '../../services/audio.service';
+import { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
+import { BlockExtended, CpfpInfo } from '../../interfaces/node-api.interface';
 import { LiquidUnblinding } from './liquid-ublinding';
 
 @Component({
@@ -24,7 +24,7 @@ import { LiquidUnblinding } from './liquid-ublinding';
   templateUrl: './transaction.component.html',
   styleUrls: ['./transaction.component.scss'],
 })
-export class TransactionComponent implements OnInit, OnDestroy {
+export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   network = '';
   tx: Transaction;
   txId: string;
@@ -47,6 +47,14 @@ export class TransactionComponent implements OnInit, OnDestroy {
   timeAvg$: Observable<number>;
   liquidUnblinding = new LiquidUnblinding();
   outputIndex: number;
+  graphExpanded: boolean = false;
+  graphWidth: number = 1000;
+  graphHeight: number = 360;
+  maxInOut: number = 0;
+  tooltipPosition: { x: number, y: number };
+
+  @ViewChild('graphContainer')
+  graphContainer: ElementRef;
 
   constructor(
     private route: ActivatedRoute,
@@ -167,6 +175,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
           this.waitingForTransaction = false;
           this.setMempoolBlocksSubscription();
           this.websocketService.startTrackTransaction(tx.txid);
+          this.setupGraph();
 
           if (!tx.status.confirmed && tx.firstSeen) {
             this.transactionTime = tx.firstSeen;
@@ -222,6 +231,10 @@ export class TransactionComponent implements OnInit, OnDestroy {
     });
   }
 
+  ngAfterViewInit(): void {
+    this.setGraphSize();
+  }
+
   handleLoadElectrsTransactionError(error: any): Observable<any> {
     if (error.status === 404 && /^[a-fA-F0-9]{64}$/.test(this.txId)) {
       this.websocketService.startMultiTrackTransaction(this.txId);
@@ -284,6 +297,26 @@ export class TransactionComponent implements OnInit, OnDestroy {
     return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
   }
 
+  setupGraph() {
+    this.maxInOut = Math.min(250, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
+    this.graphHeight = Math.min(360, this.maxInOut * 80);
+  }
+
+  expandGraph() {
+    this.graphExpanded = true;
+  }
+
+  collapseGraph() {
+    this.graphExpanded = false;
+  }
+
+  @HostListener('window:resize', ['$event'])
+  setGraphSize(): void {
+    if (this.graphContainer) {
+      this.graphWidth = this.graphContainer.nativeElement.clientWidth - 24;
+    }
+  }
+
   ngOnDestroy() {
     this.subscription.unsubscribe();
     this.fetchCpfpSubscription.unsubscribe();

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

@@ -4,10 +4,10 @@ import { Observable, ReplaySubject, BehaviorSubject, merge, Subscription } from
 import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.interface';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { environment } from 'src/environments/environment';
-import { AssetsService } from 'src/app/services/assets.service';
+import { AssetsService } from '../../services/assets.service';
 import { filter, map, tap, switchMap } from 'rxjs/operators';
-import { BlockExtended } from 'src/app/interfaces/node-api.interface';
-import { ApiService } from 'src/app/services/api.service';
+import { BlockExtended } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
 
 @Component({
   selector: 'app-transactions-list',

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html

@@ -0,0 +1,56 @@
+<div
+  #tooltip
+  *ngIf="line"
+  class="bowtie-graph-tooltip"
+  [style.visibility]="line ? 'visible' : 'hidden'"
+  [style.left]="tooltipPosition.x + 'px'"
+  [style.top]="tooltipPosition.y + 'px'"
+>
+  <ng-container *ngIf="line.rest; else coinbase">
+    <span>{{ line.rest }} </span>
+    <ng-container [ngSwitch]="line.type">
+      <span *ngSwitchCase="'input'" i18n="transaction.other-inputs">other inputs</span>
+      <span *ngSwitchCase="'output'" i18n="transaction.other-outputs">other outputs</span>
+    </ng-container>
+  </ng-container>
+
+  <ng-template #coinbase>
+    <ng-container *ngIf="line.coinbase; else pegin">
+      <p>Coinbase</p>
+    </ng-container>
+  </ng-template>
+
+  <ng-template #pegin>
+    <ng-container *ngIf="line.pegin; else pegout">
+      <p>Peg In</p>
+    </ng-container>
+  </ng-template>
+
+  <ng-template #pegout>
+    <ng-container *ngIf="line.pegout; else normal">
+      <p>Peg Out</p>
+      <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
+      <p class="address">
+        <span class="first">{{ line.pegout.slice(0, -4) }}</span>
+        <span class="last-four">{{ line.pegout.slice(-4) }}</span>
+      </p>
+    </ng-container>
+  </ng-template>
+
+  <ng-template #normal>
+      <p>
+        <ng-container [ngSwitch]="line.type">
+          <span *ngSwitchCase="'input'" i18n="transaction.input">Input</span>
+          <span *ngSwitchCase="'output'" i18n="transaction.output">Output</span>
+          <span *ngSwitchCase="'fee'" i18n="transaction.fee">Fee</span>
+        </ng-container>
+        <span *ngIf="line.type !== 'fee'"> #{{ line.index }}</span>
+      </p>
+      <p *ngIf="line.value == null && line.confidential" i18n="shared.confidential">Confidential</p>
+      <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
+      <p *ngIf="line.type !== 'fee' && line.address" class="address">
+        <span class="first">{{ line.address.slice(0, -4) }}</span>
+        <span class="last-four">{{ line.address.slice(-4) }}</span>
+      </p>
+  </ng-template>
+</div>

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss

@@ -0,0 +1,38 @@
+.bowtie-graph-tooltip {
+  position: absolute;
+  background: rgba(#11131f, 0.95);
+  border-radius: 4px;
+  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
+  color: #b1b1b1;
+  padding: 10px 15px;
+  text-align: left;
+  pointer-events: none;
+  max-width: 300px;
+
+  p {
+    margin: 0;
+    white-space: nowrap;
+  }
+
+  .address {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: flex-start;
+
+    .first {
+      flex-grow: 0;
+      flex-shrink: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: -2px;
+    }
+
+    .last-four {
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+  }
+}

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts

@@ -0,0 +1,48 @@
+import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
+import { TransactionStripped } from '../../interfaces/websocket.interface';
+
+interface Xput {
+  type: 'input' | 'output' | 'fee';
+  value?: number;
+  index?: number;
+  address?: string;
+  rest?: number;
+  coinbase?: boolean;
+  pegin?: boolean;
+  pegout?: string;
+  confidential?: boolean;
+}
+
+@Component({
+  selector: 'app-tx-bowtie-graph-tooltip',
+  templateUrl: './tx-bowtie-graph-tooltip.component.html',
+  styleUrls: ['./tx-bowtie-graph-tooltip.component.scss'],
+})
+export class TxBowtieGraphTooltipComponent implements OnChanges {
+  @Input() line: Xput | void;
+  @Input() cursorPosition: { x: number, y: number };
+
+  tooltipPosition = { x: 0, y: 0 };
+
+  @ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
+
+  constructor() {}
+
+  ngOnChanges(changes): void {
+    if (changes.cursorPosition && changes.cursorPosition.currentValue) {
+      let x = Math.max(10, changes.cursorPosition.currentValue.x - 50);
+      let y = changes.cursorPosition.currentValue.y + 20;
+      if (this.tooltipElement) {
+        const elementBounds = this.tooltipElement.nativeElement.getBoundingClientRect();
+        const parentBounds = this.tooltipElement.nativeElement.offsetParent.getBoundingClientRect();
+        if ((parentBounds.left + x + elementBounds.width) > parentBounds.right) {
+          x = Math.max(0, parentBounds.width - elementBounds.width - 10);
+        }
+        if (y + elementBounds.height > parentBounds.height) {
+          y = y - elementBounds.height - 20;
+        }
+      }
+      this.tooltipPosition = { x, y };
+    }
+  }
+}

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html

@@ -1,44 +1,82 @@
-<svg *ngIf="inputs && outputs" class="bowtie" [attr.height]="(height + 10) + 'px'" [attr.width]="width + 'px'">
-  <defs>
-    <marker id="input-arrow" viewBox="-5 -5 10 10"
-        refX="0" refY="0"
-        markerUnits="strokeWidth"
-        markerWidth="1.5" markerHeight="1"
-        orient="auto">
-      <path d="M -5 -5 L 0 0 L -5 5 L 1 5 L 1 -5 Z" stroke-width="0" [attr.fill]="gradient[0]"/>
-    </marker>
-    <marker id="output-arrow" viewBox="-5 -5 10 10"
-        refX="0" refY="0"
-        markerUnits="strokeWidth"
-        markerWidth="1.5" markerHeight="1"
-        orient="auto">
-      <path d="M 1 -5 L 0 -5 L -5 0 L 0 5 L 1 5 Z" stroke-width="0" [attr.fill]="gradient[0]"/>
-    </marker>
-    <marker id="fee-arrow" viewBox="-5 -5 10 10"
-        refX="0" refY="0"
-        markerUnits="strokeWidth"
-        markerWidth="1.5" markerHeight="1"
-        orient="auto">
-    </marker>
-    <linearGradient id="input-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+<div class="bowtie-graph">
+  <svg *ngIf="inputs && outputs" class="bowtie" [attr.height]="(height + 10) + 'px'" [attr.width]="width + 'px'">
+    <defs>
+      <marker id="input-arrow" viewBox="-5 -5 10 10"
+          refX="0" refY="0"
+          markerUnits="strokeWidth"
+          markerWidth="1.5" markerHeight="1"
+          orient="auto">
+        <path d="M -5 -5 L 0 0 L -5 5 L 1 5 L 1 -5 Z" stroke-width="0" [attr.fill]="gradient[0]"/>
+      </marker>
+      <marker id="output-arrow" viewBox="-5 -5 10 10"
+          refX="0" refY="0"
+          markerUnits="strokeWidth"
+          markerWidth="1.5" markerHeight="1"
+          orient="auto">
+        <path d="M 1 -5 L 0 -5 L -5 0 L 0 5 L 1 5 Z" stroke-width="0" [attr.fill]="gradient[0]"/>
+      </marker>
+      <marker id="fee-arrow" viewBox="-5 -5 10 10"
+          refX="0" refY="0"
+          markerUnits="strokeWidth"
+          markerWidth="1.5" markerHeight="1"
+          orient="auto">
+      </marker>
+      <linearGradient id="input-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" [attr.stop-color]="gradient[0]" />
+        <stop offset="100%" [attr.stop-color]="gradient[1]" />
+      </linearGradient>
+      <linearGradient id="output-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" [attr.stop-color]="gradient[1]" />
+        <stop offset="100%" [attr.stop-color]="gradient[0]" />
+      </linearGradient>
+      <linearGradient id="input-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" [attr.stop-color]="gradient[0]" />
-      <stop offset="100%" [attr.stop-color]="gradient[1]" />
-    </linearGradient>
-    <linearGradient id="output-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" [attr.stop-color]="gradient[1]" />
-      <stop offset="100%" [attr.stop-color]="gradient[0]" />
-    </linearGradient>
-    <linearGradient id="fee-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" [attr.stop-color]="gradient[1]" />
-      <stop offset="50%" [attr.stop-color]="gradient[1]" />
-      <stop offset="100%" stop-color="transparent" />
-    </linearGradient>
-  </defs>
-  <path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
-  <ng-container *ngFor="let input of inputs">
-    <path [attr.d]="input.path" class="line {{input.class}}" [style]="input.style" attr.marker-start="url(#{{input.class}}-arrow)"/>
-  </ng-container>
-  <ng-container *ngFor="let output of outputs">
-    <path [attr.d]="output.path" class="line {{output.class}}" [style]="output.style" attr.marker-start="url(#{{output.class}}-arrow)" />
-  </ng-container>
-</svg>
+      <stop offset="2%" [attr.stop-color]="gradient[0]" />
+        <stop offset="30%" stop-color="white" />
+        <stop offset="100%" [attr.stop-color]="gradient[1]" />
+      </linearGradient>
+      <linearGradient id="output-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" [attr.stop-color]="gradient[1]" />
+        <stop offset="70%" stop-color="white" />
+        <stop offset="98%" [attr.stop-color]="gradient[0]" />
+        <stop offset="100%" [attr.stop-color]="gradient[0]" />
+      </linearGradient>
+      <linearGradient id="fee-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" [attr.stop-color]="gradient[1]" />
+        <stop offset="100%" stop-color="white" />
+      </linearGradient>
+      <linearGradient id="fee-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" [attr.stop-color]="gradient[1]" />
+        <stop offset="50%" [attr.stop-color]="gradient[1]" />
+        <stop offset="100%" stop-color="transparent" />
+      </linearGradient>
+    </defs>
+    <path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
+    <ng-container *ngFor="let input of inputs; let i = index">
+      <path
+        [attr.d]="input.path"
+        class="line {{input.class}}"
+        [style]="input.style"
+        attr.marker-start="url(#{{input.class}}-arrow)"
+        (pointerover)="onHover($event, 'input', i);"
+        (pointerout)="onBlur($event, 'input', i);"
+      />
+    </ng-container>
+    <ng-container *ngFor="let output of outputs; let i = index">
+      <path
+        [attr.d]="output.path"
+        class="line {{output.class}}"
+        [style]="output.style"
+        attr.marker-start="url(#{{output.class}}-arrow)"
+        (pointerover)="onHover($event, 'output', i);"
+        (pointerout)="onBlur($event, 'output', i);"
+      />
+    </ng-container>
+  </svg>
+
+  <app-tx-bowtie-graph-tooltip
+    *ngIf=[tooltip]
+    [line]="hoverLine"
+    [cursorPosition]="tooltipPosition"
+  ></app-tx-bowtie-graph-tooltip>
+</div>

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss

@@ -11,5 +11,19 @@
     &.fee {
       stroke: url(#fee-gradient);
     }
+
+    &:hover {
+      z-index: 10;
+      cursor: pointer;
+      &.input {
+        stroke: url(#input-hover-gradient);
+      }
+      &.output {
+        stroke: url(#output-hover-gradient);
+      }
+      &.fee {
+        stroke: url(#fee-hover-gradient);
+      }
+    }
   }
 }