Merge branch 'master' into natsoni/tx-input-overflow

2024-12-21 17:41:27 +07:00
parent 7a8ae7c9a6 e5ea7afbe2
commit 67750bd166
353 changed files with 5589 additions and 2209 deletions
--- a/frontend/custom-bitb-config.json
+++ b/frontend/custom-bitb-config.json
@@ -0,0 +1,48 @@
+{
+  "theme": "wiz",
+  "enterprise": "bitb",
+  "branding": {
+    "name": "bitb",
+    "title": "BITB",
+    "site_id": 20,
+    "header_img": "/resources/bitblogo.svg",
+    "footer_img": "/resources/bitblogo.svg"
+  },
+  "dashboard": {
+    "widgets": [
+      {
+        "component": "fees",
+        "mobileOrder": 4
+      },
+      {
+        "component": "walletBalance",
+        "mobileOrder": 1,
+        "props": {
+          "wallet": "BITB"
+        }
+      },
+      {
+        "component": "goggles",
+        "mobileOrder": 5
+      },
+      {
+        "component": "wallet",
+        "mobileOrder": 2,
+        "props": {
+          "wallet": "BITB",
+          "period": "all"
+        }
+      },
+      {
+        "component": "blocks"
+      },
+      {
+        "component": "walletTransactions",
+        "mobileOrder": 3,
+        "props": {
+          "wallet": "BITB"
+        }
+      }
+    ]
+  }
+}
--- a/frontend/custom-meta-config.json
+++ b/frontend/custom-meta-config.json
@@ -0,0 +1,51 @@
+{
+  "theme": "contrast",
+  "enterprise": "meta",
+  "branding": {
+    "name": "metaplanet",
+    "title": "Metaplanet",
+    "site_id": 21,
+    "header_img": "/resources/metalogo.svg",
+    "footer_img": "/resources/metalogo.svg"
+  },
+  "dashboard": {
+    "widgets": [
+      {
+        "component": "fees",
+        "mobileOrder": 4
+      },
+      {
+        "component": "walletBalance",
+        "mobileOrder": 1,
+        "props": {
+          "wallet": "3350"
+        }
+      },
+      {
+        "component": "twitter",
+        "mobileOrder": 5,
+        "props": {
+          "handle": "Metaplanet_JP"
+        }
+      },
+      {
+        "component": "wallet",
+        "mobileOrder": 2,
+        "props": {
+          "wallet": "3350",
+          "period": "all"
+        }
+      },
+      {
+        "component": "blocks"
+      },
+      {
+        "component": "walletTransactions",
+        "mobileOrder": 3,
+        "props": {
+          "wallet": "3350"
+        }
+      }
+    ]
+  }
+}
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -1,15 +1,15 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { AppPreloadingStrategy } from './app.preloading-strategy'
-import { BlockViewComponent } from './components/block-view/block-view.component';
-import { EightBlocksComponent } from './components/eight-blocks/eight-blocks.component';
-import { MempoolBlockViewComponent } from './components/mempool-block-view/mempool-block-view.component';
-import { ClockComponent } from './components/clock/clock.component';
-import { StatusViewComponent } from './components/status-view/status-view.component';
-import { AddressGroupComponent } from './components/address-group/address-group.component';
-import { TrackerComponent } from './components/tracker/tracker.component';
-import { AccelerateCheckout } from './components/accelerate-checkout/accelerate-checkout.component';
-import { TrackerGuard } from './route-guards';
+import { AppPreloadingStrategy } from '@app/app.preloading-strategy'
+import { BlockViewComponent } from '@components/block-view/block-view.component';
+import { EightBlocksComponent } from '@components/eight-blocks/eight-blocks.component';
+import { MempoolBlockViewComponent } from '@components/mempool-block-view/mempool-block-view.component';
+import { ClockComponent } from '@components/clock/clock.component';
+import { StatusViewComponent } from '@components/status-view/status-view.component';
+import { AddressGroupComponent } from '@components/address-group/address-group.component';
+import { TrackerComponent } from '@components/tracker/tracker.component';
+import { AccelerateCheckout } from '@components/accelerate-checkout/accelerate-checkout.component';
+import { TrackerGuard } from '@app/route-guards';

 const browserWindow = window || {};
 // @ts-ignore
@@ -22,16 +22,16 @@ let routes: Routes = [
      {
        path: '',
        pathMatch: 'full',
-        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
        data: { preload: true },
      },
      {
        path: '',
-        loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
+        loadChildren: () => import('@app/master-page.module').then(m => m.MasterPageModule),
        data: { preload: true },
      },
      {
-        path: 'wallet',
+        path: 'widget/wallet',
        children: [],
        component: AddressGroupComponent,
        data: {
@@ -45,7 +45,7 @@ let routes: Routes = [
      },
      {
        path: '',
-        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
        data: { preload: true },
      },
      {
@@ -60,12 +60,12 @@ let routes: Routes = [
      {
        path: '',
        pathMatch: 'full',
-        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
        data: { preload: true },
      },
      {
        path: '',
-        loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
+        loadChildren: () => import('@app/master-page.module').then(m => m.MasterPageModule),
        data: { preload: true },
      },
      {
@@ -83,7 +83,7 @@ let routes: Routes = [
      },
      {
        path: '',
-        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
        data: { preload: true },
      },
      {
@@ -103,16 +103,16 @@ let routes: Routes = [
      {
        path: '',
        pathMatch: 'full',
-        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
        data: { preload: true },
      },
      {
        path: '',
-        loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
+        loadChildren: () => import('@app/master-page.module').then(m => m.MasterPageModule),
        data: { preload: true },
      },
      {
-        path: 'wallet',
+        path: 'widget/wallet',
        children: [],
        component: AddressGroupComponent,
        data: {
@@ -126,7 +126,7 @@ let routes: Routes = [
      },
      {
        path: '',
-        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
        data: { preload: true },
      },
      {
@@ -138,22 +138,22 @@ let routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
-    loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+    loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
    data: { preload: true },
  },
  {
    path: 'tx',
    canMatch: [TrackerGuard],
    runGuardsAndResolvers: 'always',
-    loadChildren: () => import('./components/tracker/tracker.module').then(m => m.TrackerModule),
+    loadChildren: () => import('@components/tracker/tracker.module').then(m => m.TrackerModule),
  },
  {
    path: '',
-    loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
+    loadChildren: () => import('@app/master-page.module').then(m => m.MasterPageModule),
    data: { preload: true },
  },
  {
-    path: 'wallet',
+    path: 'widget/wallet',
    children: [],
    component: AddressGroupComponent,
    data: {
@@ -165,19 +165,19 @@ let routes: Routes = [
    children: [
      {
        path: '',
-        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
+        loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
      },
      {
        path: 'testnet',
-        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
+        loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
      },
      {
        path: 'testnet4',
-        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
+        loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
      },
      {
        path: 'signet',
-        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
+        loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
      },
    ],
  },
@@ -212,7 +212,7 @@ let routes: Routes = [
  },
  {
    path: '',
-    loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+    loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
    data: { preload: true },
  },
 ];
@@ -225,16 +225,16 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
        {
          path: '',
          pathMatch: 'full',
-          loadChildren: () => import('./liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
+          loadChildren: () => import('@app/liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
          data: { preload: true },
        },
        {
          path: '',
-          loadChildren: () => import ('./liquid/liquid-master-page.module').then(m => m.LiquidMasterPageModule),
+          loadChildren: () => import ('@app/liquid/liquid-master-page.module').then(m => m.LiquidMasterPageModule),
          data: { preload: true },
        },
        {
-          path: 'wallet',
+          path: 'widget/wallet',
          children: [],
          component: AddressGroupComponent,
          data: {
@@ -248,7 +248,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
        },
        {
          path: '',
-          loadChildren: () => import('./liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
+          loadChildren: () => import('@app/liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
          data: { preload: true },
        },
        {
@@ -260,16 +260,16 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
    {
      path: '',
      pathMatch: 'full',
-      loadChildren: () => import('./liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
+      loadChildren: () => import('@app/liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
      data: { preload: true },
    },
    {
      path: '',
-      loadChildren: () => import ('./liquid/liquid-master-page.module').then(m => m.LiquidMasterPageModule),
+      loadChildren: () => import ('@app/liquid/liquid-master-page.module').then(m => m.LiquidMasterPageModule),
      data: { preload: true },
    },
    {
-      path: 'wallet',
+      path: 'widget/wallet',
      children: [],
      component: AddressGroupComponent,
      data: {
@@ -281,11 +281,11 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
      children: [
        {
          path: '',
-          loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
+          loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
        },
        {
          path: 'testnet',
-          loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
+          loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
        },
      ],
    },
@@ -296,7 +296,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
    },
    {
      path: '',
-      loadChildren: () => import('./liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
+      loadChildren: () => import('@app/liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
      data: { preload: true },
    },
  ];
--- a/frontend/src/app/app.constants.ts
+++ b/frontend/src/app/app.constants.ts
@@ -439,4 +439,39 @@ export const fiatCurrencies = {
    code: 'ZAR',
    indexed: true,
  },
-};
+};
+
+export interface Timezone {
+  offset: string;
+  name: string;
+}
+
+export const timezones: Timezone[] = [
+  { offset: '-12', name: 'Anywhere on Earth (AoE)' },
+  { offset: '-11', name: 'Samoa Standard Time (SST)' },
+  { offset: '-10', name: 'Hawaii Standard Time (HST)' },
+  { offset: '-9', name: 'Alaska Standard Time (AKST)' },
+  { offset: '-8', name: 'Pacific Standard Time (PST)' },
+  { offset: '-7', name: 'Mountain Standard Time (MST)' },
+  { offset: '-6', name: 'Central Standard Time (CST)' },
+  { offset: '-5', name: 'Eastern Standard Time (EST)' },
+  { offset: '-4', name: 'Atlantic Standard Time (AST)' },
+  { offset: '-3', name: 'Argentina Time (ART)' },
+  { offset: '-2', name: 'Fernando de Noronha Time (FNT)' },
+  { offset: '-1', name: 'Azores Time (AZOT)' },
+  { offset: '+0', name: 'Greenwich Mean Time (GMT)' },
+  { offset: '+1', name: 'Central European Time (CET)' },
+  { offset: '+2', name: 'Eastern European Time (EET)' },
+  { offset: '+3', name: 'Moscow Standard Time (MSK)' },
+  { offset: '+4', name: 'Armenia Time (AMT)' },
+  { offset: '+5', name: 'Pakistan Standard Time (PKT)' },
+  { offset: '+6', name: 'Xinjiang Time (XJT)' },
+  { offset: '+7', name: 'Indochina Time (ICT)' },
+  { offset: '+8', name: 'Hong Kong Time (HKT)' },
+  { offset: '+9', name: 'Japan Standard Time (JST)' },
+  { offset: '+10', name: 'Australian Eastern Standard Time (AEST)' },
+  { offset: '+11', name: 'Norfolk Time (NFT)' },
+  { offset: '+12', name: 'New Zealand Standard Time (NZST)' },
+  { offset: '+13', name: 'Tonga Time (TOT)' },
+  { offset: '+14', name: 'Line Islands Time (LINT)' }
+];
--- a/frontend/src/app/app.module.server.ts
+++ b/frontend/src/app/app.module.server.ts
@@ -2,11 +2,11 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';

-import { ZONE_SERVICE } from './injection-tokens';
+import { ZONE_SERVICE } from '@app/injection-tokens';
 import { AppModule } from './app.module';
-import { AppComponent } from './components/app/app.component';
-import { HttpCacheInterceptor } from './services/http-cache.interceptor';
-import { ZoneService } from './services/zone.service';
+import { AppComponent } from '@components/app/app.component';
+import { HttpCacheInterceptor } from '@app/services/http-cache.interceptor';
+import { ZoneService } from '@app/services/zone.service';


@NgModule({
@@ -20,4 +20,4 @@ import { ZoneService } from './services/zone.service';
  ],
  bootstrap: [AppComponent],
 })
-export class AppServerModule {}
+export class AppServerModule {}
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -2,33 +2,33 @@ import { BrowserModule } from '@angular/platform-browser';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ZONE_SERVICE } from './injection-tokens';
+import { ZONE_SERVICE } from '@app/injection-tokens';
 import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './components/app/app.component';
-import { ElectrsApiService } from './services/electrs-api.service';
-import { OrdApiService } from './services/ord-api.service';
-import { StateService } from './services/state.service';
-import { CacheService } from './services/cache.service';
-import { PriceService } from './services/price.service';
-import { EnterpriseService } from './services/enterprise.service';
-import { WebsocketService } from './services/websocket.service';
-import { AudioService } from './services/audio.service';
-import { PreloadService } from './services/preload.service';
-import { SeoService } from './services/seo.service';
-import { OpenGraphService } from './services/opengraph.service';
-import { ZoneService } from './services/zone-shim.service';
-import { SharedModule } from './shared/shared.module';
-import { StorageService } from './services/storage.service';
-import { HttpCacheInterceptor } from './services/http-cache.interceptor';
-import { LanguageService } from './services/language.service';
-import { ThemeService } from './services/theme.service';
-import { TimeService } from './services/time.service';
-import { FiatShortenerPipe } from './shared/pipes/fiat-shortener.pipe';
-import { FiatCurrencyPipe } from './shared/pipes/fiat-currency.pipe';
-import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
-import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
-import { AppPreloadingStrategy } from './app.preloading-strategy';
-import { ServicesApiServices } from './services/services-api.service';
+import { AppComponent } from '@components/app/app.component';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { OrdApiService } from '@app/services/ord-api.service';
+import { StateService } from '@app/services/state.service';
+import { CacheService } from '@app/services/cache.service';
+import { PriceService } from '@app/services/price.service';
+import { EnterpriseService } from '@app/services/enterprise.service';
+import { WebsocketService } from '@app/services/websocket.service';
+import { AudioService } from '@app/services/audio.service';
+import { PreloadService } from '@app/services/preload.service';
+import { SeoService } from '@app/services/seo.service';
+import { OpenGraphService } from '@app/services/opengraph.service';
+import { ZoneService } from '@app/services/zone-shim.service';
+import { SharedModule } from '@app/shared/shared.module';
+import { StorageService } from '@app/services/storage.service';
+import { HttpCacheInterceptor } from '@app/services/http-cache.interceptor';
+import { LanguageService } from '@app/services/language.service';
+import { ThemeService } from '@app/services/theme.service';
+import { TimeService } from '@app/services/time.service';
+import { FiatShortenerPipe } from '@app/shared/pipes/fiat-shortener.pipe';
+import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';
+import { ShortenStringPipe } from '@app/shared/pipes/shorten-string-pipe/shorten-string.pipe';
+import { CapAddressPipe } from '@app/shared/pipes/cap-address-pipe/cap-address-pipe';
+import { AppPreloadingStrategy } from '@app/app.preloading-strategy';
+import { ServicesApiServices } from '@app/services/services-api.service';
 import { DatePipe } from '@angular/common';

 const providers = [
--- a/frontend/src/app/bitcoin-graphs.module.ts
+++ b/frontend/src/app/bitcoin-graphs.module.ts
@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
-import { MasterPageComponent } from './components/master-page/master-page.component';
+import { MasterPageComponent } from '@components/master-page/master-page.component';

 const routes: Routes = [
  {
    path: '',
    component: MasterPageComponent,
-    loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule),
+    loadChildren: () => import('@app/graphs/graphs.module').then(m => m.GraphsModule),
    data: { preload: true },
  }
 ];
--- a/frontend/src/app/bitcoin.utils.ts
+++ b/frontend/src/app/bitcoin.utils.ts
@@ -1,5 +1,5 @@
-import { Transaction, Vin } from './interfaces/electrs.interface';
-import { Hash } from './shared/sha256';
+import { Transaction, Vin } from '@interfaces/electrs.interface';
+import { Hash } from '@app/shared/sha256';

 const P2SH_P2WPKH_COST = 21 * 4; // the WU cost for the non-witness part of P2SH-P2WPKH
 const P2SH_P2WSH_COST  = 35 * 4; // the WU cost for the non-witness part of P2SH-P2WSH
@@ -303,4 +303,4 @@ export async function calcScriptHash$(script: string): Promise<string> {
  return hashArray
    .map((bytes) => bytes.toString(16).padStart(2, '0'))
    .join('');
-}
+}
--- a/frontend/src/app/components/about/about-sponsors.component.ts
+++ b/frontend/src/app/components/about/about-sponsors.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { EnterpriseService } from '../../services/enterprise.service';
+import { EnterpriseService } from '@app/services/enterprise.service';

@Component({
  selector: 'app-about-sponsors',
--- a/frontend/src/app/components/about/about.component.ts
+++ b/frontend/src/app/components/about/about.component.ts
@@ -1,16 +1,16 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core';
-import { WebsocketService } from '../../services/websocket.service';
-import { SeoService } from '../../services/seo.service';
-import { OpenGraphService } from '../../services/opengraph.service';
-import { StateService } from '../../services/state.service';
+import { WebsocketService } from '@app/services/websocket.service';
+import { SeoService } from '@app/services/seo.service';
+import { OpenGraphService } from '@app/services/opengraph.service';
+import { StateService } from '@app/services/state.service';
 import { Observable } from 'rxjs';
-import { ApiService } from '../../services/api.service';
-import { IBackendInfo } from '../../interfaces/websocket.interface';
+import { ApiService } from '@app/services/api.service';
+import { IBackendInfo } from '@interfaces/websocket.interface';
 import { Router, ActivatedRoute } from '@angular/router';
 import { map, share, tap } from 'rxjs/operators';
-import { ITranslators } from '../../interfaces/node-api.interface';
+import { ITranslators } from '@interfaces/node-api.interface';
 import { DOCUMENT } from '@angular/common';
-import { EnterpriseService } from '../../services/enterprise.service';
+import { EnterpriseService } from '@app/services/enterprise.service';

@Component({
  selector: 'app-about',
--- a/frontend/src/app/components/about/about.module.ts
+++ b/frontend/src/app/components/about/about.module.ts
@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
-import { AboutComponent } from './about.component';
-import { AboutSponsorsComponent } from './about-sponsors.component';
-import { SharedModule } from '../../shared/shared.module';
+import { AboutComponent } from '@components/about/about.component';
+import { AboutSponsorsComponent } from '@components/about/about-sponsors.component';
+import { SharedModule } from '@app/shared/shared.module';

 const routes: Routes = [
  {
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
@@ -172,10 +172,6 @@
  background-color: var(--tertiary);
 }

-.btn-small-height {
-	line-height: 1;
-}
-
 .summary-row {
  display: flex;
  flex-direction: row;
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
@@ -1,16 +1,16 @@
 /* eslint-disable no-console */
 import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef, SimpleChanges, HostListener } from '@angular/core';
 import { Subscription, tap, of, catchError, Observable, switchMap } from 'rxjs';
-import { ServicesApiServices } from '../../services/services-api.service';
-import { md5, insecureRandomUUID } from '../../shared/common.utils';
-import { StateService } from '../../services/state.service';
-import { AudioService } from '../../services/audio.service';
-import { ETA, EtaService } from '../../services/eta.service';
-import { Transaction } from '../../interfaces/electrs.interface';
-import { MiningStats } from '../../services/mining.service';
-import { IAuth, AuthServiceMempool } from '../../services/auth.service';
-import { EnterpriseService } from '../../services/enterprise.service';
-import { ApiService } from '../../services/api.service';
+import { ServicesApiServices } from '@app/services/services-api.service';
+import { md5 } from '@app/shared/common.utils';
+import { StateService } from '@app/services/state.service';
+import { AudioService } from '@app/services/audio.service';
+import { ETA, EtaService } from '@app/services/eta.service';
+import { Transaction } from '@interfaces/electrs.interface';
+import { MiningStats } from '@app/services/mining.service';
+import { IAuth, AuthServiceMempool } from '@app/services/auth.service';
+import { EnterpriseService } from '@app/services/enterprise.service';
+import { ApiService } from '@app/services/api.service';
 import { isDevMode } from '@angular/core';

 export type PaymentMethod = 'balance' | 'bitcoin' | 'cashapp' | 'applePay' | 'googlePay';
@@ -84,13 +84,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
  timePaid: number = 0; // time acceleration requested
  math = Math;
  isMobile: boolean = window.innerWidth <= 767.98;
-  isProdDomain = ['mempool.space',
-    'mempool-staging.va1.mempool.space',
-    'mempool-staging.fmt.mempool.space',
-    'mempool-staging.fra.mempool.space',
-    'mempool-staging.tk7.mempool.space',
-    'mempool-staging.sg1.mempool.space'
-   ].indexOf(document.location.hostname) > -1;
+  isProdDomain = false;

  private _step: CheckoutStep = 'summary';
  simpleMode: boolean = true;
@@ -100,7 +94,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
  auth: IAuth | null = null;

  // accelerator stuff
-  accelerationUUID: string;
  accelerationSubscription: Subscription;
  difficultySubscription: Subscription;
  estimateSubscription: Subscription;
@@ -143,7 +136,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
    private authService: AuthServiceMempool,
    private enterpriseService: EnterpriseService,
  ) {
-    this.accelerationUUID = insecureRandomUUID();
+    this.isProdDomain = this.stateService.env.PROD_DOMAINS.indexOf(document.location.hostname) > -1;

    // Check if Apple Pay available
    // https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/checking_for_apple_pay_availability#overview
@@ -207,6 +200,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
  }

  moveToStep(step: CheckoutStep): void {
+    this.processing = false;
    this._step = step;
    if (this.timeoutTimer) {
      clearTimeout(this.timeoutTimer);
@@ -392,7 +386,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
    this.accelerationSubscription = this.servicesApiService.accelerate$(
      this.tx.txid,
      this.userBid,
-      this.accelerationUUID
    ).subscribe({
      next: () => {
        this.processing = false;
@@ -526,7 +519,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                tokenResult.token,
                cardTag,
                `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
-                this.accelerationUUID,
                costUSD
              ).subscribe({
                next: () => {
@@ -620,13 +612,20 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
              this.processing = false;
              return;
            }
+            const verificationToken = await this.$verifyBuyer(this.payments, tokenResult.token, tokenResult.details, costUSD.toFixed(2));
+            if (!verificationToken) {
+              console.error(`SCA verification failed`);
+              this.accelerateError = 'SCA Verification Failed. Payment Declined.';
+              this.processing = false;
+              return;
+            }
            const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
            this.servicesApiService.accelerateWithGooglePay$(
              this.tx.txid,
              tokenResult.token,
+              verificationToken,
              cardTag,
              `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
-              this.accelerationUUID,
              costUSD
            ).subscribe({
              next: () => {
@@ -717,7 +716,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
              tokenResult.token,
              tokenResult.details.cashAppPay.cashtag,
              tokenResult.details.cashAppPay.referenceId,
-              this.accelerationUUID,
              costUSD
            ).subscribe({
              next: () => {
@@ -753,6 +751,32 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
    );
  }

+  /**
+   * Required in SCA Mandated Regions: Learn more at https://developer.squareup.com/docs/sca-overview
+   */
+  async $verifyBuyer(payments, token, details, amount) {
+    const verificationDetails = {
+      amount: amount,
+      currencyCode: 'USD',
+      intent: 'CHARGE',
+      billingContact: {
+        givenName: details.card?.billing?.givenName,
+        familyName: details.card?.billing?.familyName,
+        phone: details.card?.billing?.phone,
+        addressLines: details.card?.billing?.addressLines,
+        city: details.card?.billing?.city,
+        state: details.card?.billing?.state,
+        countryCode: details.card?.billing?.countryCode,
+      },
+    };
+
+    const verificationResults = await payments.verifyBuyer(
+      token,
+      verificationDetails,
+    );
+    return verificationResults.token;
+  }
+
  /**
   * BTCPay
   */
--- a/frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.ts
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-fee-graph.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, Output, OnChanges, EventEmitter, HostListener, OnInit, ViewChild, ElementRef, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { Transaction } from '../../interfaces/electrs.interface';
-import { AccelerationEstimate, RateOption } from './accelerate-checkout.component';
+import { Transaction } from '@interfaces/electrs.interface';
+import { AccelerationEstimate, RateOption } from '@components/accelerate-checkout/accelerate-checkout.component';

 interface GraphBar {
  rate: number;
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
@@ -1,6 +1,6 @@
 <div class="acceleration-timeline box" [class.lower-padding]="!tx.status.confirmed">
  <div class="timeline-wrapper">
-    @if (!tx.status.confirmed) {
+    @if (!tx.status.confirmed || canceled) {
    <div class="timeline">
      <div class="intervals">
        <div class="node-spacer"></div>
@@ -8,7 +8,7 @@
        <div class="node-spacer"></div>
        <div class="interval">
          <div class="interval-time">
-            @if (eta) {
+            @if (eta && !canceled) {
              ~<app-time [time]="eta?.wait / 1000"></app-time>
              }
          </div>
@@ -19,16 +19,20 @@
        <div class="node-spacer"></div>
        <div class="interval-spacer"></div>
        <div class="node">
-          <div class="acc-to-confirmed right go-faster"></div>
+          <div class="acc-to-confirmed right go-faster" [class.no-animation]="canceled"></div>
        </div>
        <div class="interval-spacer">
        </div>
        <div class="node" [id]="'confirmed'">
-          <div class="acc-to-confirmed left go-faster"></div>
+          <div class="acc-to-confirmed left go-faster" [class.no-animation]="canceled"></div>
          <div class="shape-border waiting">
            <div class="shape"></div>
          </div>
-          <div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
+          @if (canceled) {
+          <div class="status"><span class="badge badge-danger" i18n="accelerator.canceled">Canceled</span></div>
+          } @else {
+            <div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
+          }
        </div>
      </div>
    </div>
@@ -45,9 +49,9 @@
        <div class="interval">
          <div class="interval-time">
            @if (tx.status.confirmed) {
-              <div class="interval-time">
-                <app-time [time]="acceleratedToMined"></app-time>
-              </div>
+              <app-time [time]="acceleratedToMined"></app-time>
+            } @else if (eta && canceled) {
+              ~<app-time [time]="eta?.wait / 1000"></app-time>
            }
          </div>
        </div>
@@ -71,42 +75,42 @@
        <div class="interval-spacer">
          <div class="seen-to-acc"></div>
        </div>
-        <div class="node" [class.accelerated]="!tx.status.confirmed" [id]="'accelerated'">
+        <div class="node" [class.accelerated]="!tx.status.confirmed && !canceled" [id]="'accelerated'">
          <div class="seen-to-acc left"></div>
-          @if (tx.status.confirmed) {
+          @if (tx.status.confirmed && !canceled) {
            <div class="acc-to-confirmed right"></div>
          } @else {
          <div class="seen-to-acc right"></div>
          }
          <div  class="shape-border hovering" (pointerover)="onHover($event, 'accelerated');" (pointerout)="onBlur($event);">
            <div class="shape"></div>
-            @if (!tx.status.confirmed) {
-            <div class="connector down loading"></div>
+            @if (!tx.status.confirmed || canceled) {
+            <div class="connector down" [class.loading]="!canceled"></div>
            }
          </div>
-          @if (tx.status.confirmed) {
+          @if (tx.status.confirmed && !canceled) {
            <div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
          }
-          <div class="time" [class.no-margin]="!tx.status.confirmed" [class.offset-left]="!tx.status.confirmed">
+          <div class="time" [class.no-margin]="!tx.status.confirmed || canceled" [class.offset-left]="!tx.status.confirmed || canceled">
            @if (!tx.status.confirmed) {
            <span i18n="transaction.audit.accelerated">Accelerated</span>{{ "" }} 
            }
            @if (useAbsoluteTime) {
            <span>{{ acceleratedAt * 1000 | date }}</span>
            } @else {
-            <app-time kind="since" [time]="acceleratedAt" [lowercaseStart]="!tx.status.confirmed"></app-time>
+            <app-time kind="since" [time]="acceleratedAt" [lowercaseStart]="!tx.status.confirmed || canceled"></app-time>
            }
          </div>
        </div>
        <div class="interval-spacer">
-          @if (tx.status.confirmed) {
+          @if (tx.status.confirmed && !canceled) {
          <div class="acc-to-confirmed"></div>
          } @else {
          <div class="seen-to-acc"></div>
          }
        </div>
        <div class="node" [class.selected]="tx.status.confirmed" [id]="'confirmed'">
-          @if (tx.status.confirmed) {
+          @if (tx.status.confirmed && !canceled) {
          <div class="acc-to-confirmed left"></div>
          } @else {
          <div class="seen-to-acc left"></div>
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -129,6 +129,9 @@
          margin-left: calc(-4em + 5px);
          animation: goFasterLeft 0.8s infinite linear;
        }
+        &.no-animation {
+          animation: none;
+        }
      }

      &.left {
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input, OnInit, OnChanges, HostListener } from '@angular/core';
-import { ETA } from '../../services/eta.service';
-import { Transaction } from '../../interfaces/electrs.interface';
-import { Acceleration, SinglePoolStats } from '../../interfaces/node-api.interface';
-import { MiningService } from '../../services/mining.service';
+import { ETA } from '@app/services/eta.service';
+import { Transaction } from '@interfaces/electrs.interface';
+import { Acceleration, SinglePoolStats } from '@interfaces/node-api.interface';
+import { MiningService } from '@app/services/mining.service';

@Component({
  selector: 'app-acceleration-timeline',
@@ -15,6 +15,7 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
  @Input() tx: Transaction;
  @Input() accelerationInfo: Acceleration;
  @Input() eta: ETA;
+  @Input() canceled: boolean;

  now: number;
  accelerateRatio: number;
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { EChartsOption } from '../../../graphs/echarts';
+import { EChartsOption } from '@app/graphs/echarts';
 import { Observable, Subject, Subscription, combineLatest, fromEvent, merge, share } from 'rxjs';
 import { startWith, switchMap, tap } from 'rxjs/operators';
-import { SeoService } from '../../../services/seo.service';
+import { SeoService } from '@app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../../shared/graphs.utils';
-import { StorageService } from '../../../services/storage.service';
-import { MiningService } from '../../../services/mining.service';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '@app/shared/graphs.utils';
+import { StorageService } from '@app/services/storage.service';
+import { MiningService } from '@app/services/mining.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Acceleration } from '../../../interfaces/node-api.interface';
-import { ServicesApiServices } from '../../../services/services-api.service';
-import { StateService } from '../../../services/state.service';
-import { RelativeUrlPipe } from '../../../shared/pipes/relative-url/relative-url.pipe';
+import { Acceleration } from '@interfaces/node-api.interface';
+import { ServicesApiServices } from '@app/services/services-api.service';
+import { StateService } from '@app/services/state.service';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';

@Component({
  selector: 'app-acceleration-fees-graph',
--- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts
+++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ServicesApiServices } from '../../../services/services-api.service';
+import { ServicesApiServices } from '@app/services/services-api.service';

 export type AccelerationStats = {
  totalRequested: number;
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
@@ -4,7 +4,7 @@

  <div class="clearfix"></div>

-  <div class="acceleration-list">
+  <div class="acceleration-list" *ngIf="{ accelerations: accelerationList$ | async } as state">
    <table *ngIf="nonEmptyAccelerations; else noData" class="table table-borderless table-fixed">
      <thead>
        <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
@@ -21,8 +21,8 @@
          <th class="date text-right" i18n="accelerator.requested" *ngIf="!this.widget">Requested</th>
        </ng-container>
      </thead>
-      <tbody *ngIf="accelerationList$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
-        <tr *ngFor="let acceleration of accelerations; let i= index;">
+      <tbody *ngIf="state.accelerations && nonEmptyAccelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+        <tr *ngFor="let acceleration of state.accelerations; let i= index;">
          <td class="txid text-left">
            <a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
              <app-truncate [text]="acceleration.txid" [lastChars]="5"></app-truncate>
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
@@ -1,12 +1,12 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy, Inject, LOCALE_ID } from '@angular/core';
 import { BehaviorSubject, Observable, Subscription, catchError, combineLatest, filter, of, switchMap, tap, throttleTime, timer } from 'rxjs';
-import { Acceleration, BlockExtended, SinglePoolStats } from '../../../interfaces/node-api.interface';
-import { StateService } from '../../../services/state.service';
-import { WebsocketService } from '../../../services/websocket.service';
-import { ServicesApiServices } from '../../../services/services-api.service';
-import { SeoService } from '../../../services/seo.service';
+import { Acceleration, BlockExtended, SinglePoolStats } from '@interfaces/node-api.interface';
+import { StateService } from '@app/services/state.service';
+import { WebsocketService } from '@app/services/websocket.service';
+import { ServicesApiServices } from '@app/services/services-api.service';
+import { SeoService } from '@app/services/seo.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MiningService } from '../../../services/mining.service';
+import { MiningService } from '@app/services/mining.service';

@Component({
  selector: 'app-accelerations-list',
@@ -151,4 +151,4 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
    this.paramSubscription?.unsubscribe();
    this.keyNavigationSubscription?.unsubscribe();
  }
-}
+}
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
-import { SeoService } from '../../../services/seo.service';
-import { OpenGraphService } from '../../../services/opengraph.service';
-import { WebsocketService } from '../../../services/websocket.service';
-import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
-import { StateService } from '../../../services/state.service';
+import { SeoService } from '@app/services/seo.service';
+import { OpenGraphService } from '@app/services/opengraph.service';
+import { WebsocketService } from '@app/services/websocket.service';
+import { Acceleration, BlockExtended } from '@interfaces/node-api.interface';
+import { StateService } from '@app/services/state.service';
 import { Observable, Subscription, catchError, combineLatest, distinctUntilChanged, map, of, share, switchMap, tap } from 'rxjs';
-import { Color } from '../../block-overview-graph/sprite-types';
-import { hexToColor } from '../../block-overview-graph/utils';
-import TxView from '../../block-overview-graph/tx-view';
-import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../../app.constants';
-import { ServicesApiServices } from '../../../services/services-api.service';
-import { detectWebGL } from '../../../shared/graphs.utils';
-import { AudioService } from '../../../services/audio.service';
-import { ThemeService } from '../../../services/theme.service';
+import { Color } from '@components/block-overview-graph/sprite-types';
+import { hexToColor } from '@components/block-overview-graph/utils';
+import TxView from '@components/block-overview-graph/tx-view';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '@app/app.constants';
+import { ServicesApiServices } from '@app/services/services-api.service';
+import { detectWebGL } from '@app/shared/graphs.utils';
+import { AudioService } from '@app/services/audio.service';
+import { ThemeService } from '@app/services/theme.service';

 const acceleratedColor: Color = hexToColor('8F5FF6');
 const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
@@ -20,7 +20,7 @@
      <td class="pie-chart" rowspan="2" *ngIf="!chartPositionLeft">
        <div class="d-flex justify-content-between align-items-start">
          @if (hasCpfp) {
-            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
+            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP</button>
          }
          <ng-container *ngTemplateOutlet="pieChart"></ng-container>
        </div>
@@ -36,7 +36,7 @@
      <tr>
        <td colspan="3" class="pt-0">
          <div class="d-flex justify-content-end align-items-start">
-            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
+            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP</button>
          </div>
        </td>
      </tr>
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
@@ -1,8 +1,8 @@
 import { Component, ChangeDetectionStrategy, Input, Output, OnChanges, SimpleChanges, EventEmitter, ChangeDetectorRef } from '@angular/core';
-import { Transaction } from '../../../interfaces/electrs.interface';
-import { Acceleration, SinglePoolStats } from '../../../interfaces/node-api.interface';
-import { EChartsOption, PieSeriesOption } from '../../../graphs/echarts';
-import { MiningStats } from '../../../services/mining.service';
+import { Transaction } from '@interfaces/electrs.interface';
+import { Acceleration, SinglePoolStats } from '@interfaces/node-api.interface';
+import { EChartsOption, PieSeriesOption } from '@app/graphs/echarts';
+import { MiningStats } from '@app/services/mining.service';

 function lighten(color, p): { r, g, b } {
  return {
@@ -76,15 +76,21 @@ export class ActiveAccelerationBox implements OnChanges {
    acceleratingPools.forEach((poolId, index) => {
      const pool = pools[poolId];
      const poolShare = ((pool.lastEstimatedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1);
+      let color = 'white';
+      if (index >= firstSignificantPool) {
+        if (numSignificantPools > 1) {
+          color = toRGB(lighten({ r: 147, g: 57, b: 244 }, 1 - (index - firstSignificantPool) / Math.max((numSignificantPools - 1), 1)));
+        } else {
+          color = toRGB({ r: 147, g: 57, b: 244 });
+        }
+      }
      data.push(getDataItem(
        pool.lastEstimatedHashrate,
-        index >= firstSignificantPool
-          ? toRGB(lighten({ r: 147, g: 57, b: 244 }, 1 - (index - firstSignificantPool) / (numSignificantPools - 1)))
-          : 'white',
+        color,
        `<b style="color: white">${pool.name} (${poolShare}%)</b>`,
        true,
      ) as PieSeriesOption);
-    })
+    });
    this.acceleratedByPercentage = ((totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1) + '%';
    const notAcceleratedByPercentage = ((1 - (totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate)) * 100).toFixed(1) + '%';
    data.push(getDataItem(
@@ -148,4 +154,4 @@ export class ActiveAccelerationBox implements OnChanges {
  onToggleCpfp(): void {
    this.toggleCpfp.emit();
  }
-}
+}
--- a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts
+++ b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts
@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import { Acceleration } from '../../../interfaces/node-api.interface';
-import { StateService } from '../../../services/state.service';
-import { WebsocketService } from '../../../services/websocket.service';
+import { Acceleration } from '@interfaces/node-api.interface';
+import { StateService } from '@app/services/state.service';
+import { WebsocketService } from '@app/services/websocket.service';

@Component({
  selector: 'app-pending-stats',
--- a/frontend/src/app/components/address-graph/address-graph.component.ts
+++ b/frontend/src/app/components/address-graph/address-graph.component.ts
@@ -1,16 +1,15 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { echarts, EChartsOption } from '../../graphs/echarts';
+import { echarts, EChartsOption } from '@app/graphs/echarts';
 import { BehaviorSubject, Observable, Subscription, combineLatest, of } from 'rxjs';
 import { catchError, map, switchMap, tap } from 'rxjs/operators';
-import { AddressTxSummary, ChainStats } from '../../interfaces/electrs.interface';
-import { ElectrsApiService } from '../../services/electrs-api.service';
-import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
+import { AddressTxSummary, ChainStats } from '@interfaces/electrs.interface';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { AmountShortenerPipe } from '@app/shared/pipes/amount-shortener.pipe';
 import { Router } from '@angular/router';
-import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
-import { StateService } from '../../services/state.service';
-import { PriceService } from '../../services/price.service';
-import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
-import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '@app/services/state.service';
+import { PriceService } from '@app/services/price.service';
+import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';

 const periodSeconds = {
  '1d': (60 * 60 * 24),
@@ -45,14 +44,18 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
  @Input() right: number | string = 10;
  @Input() left: number | string = 70;
  @Input() widget: boolean = false;
+  @Input() defaultFiat: boolean = false;
+  @Input() showLegend: boolean = true;
+  @Input() showYAxis: boolean = true;

+  adjustedLeft: number;
+  adjustedRight: number;
  data: any[] = [];
  fiatData: any[] = [];
  hoverData: any[] = [];
  conversions: any;
  allowZoom: boolean = false;
-  initialRight = this.right;
-  initialLeft = this.left;
+
  selected = { [$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`]: true, 'Fiat': false };

  subscription: Subscription;
@@ -77,15 +80,17 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
    private relativeUrlPipe: RelativeUrlPipe,
    private priceService: PriceService,
    private fiatCurrencyPipe: FiatCurrencyPipe,
-    private fiatShortenerPipe: FiatShortenerPipe,
    private zone: NgZone,
  ) {}

  ngOnChanges(changes: SimpleChanges): void {
    this.isLoading = true;
-    if (!this.address || !this.stats) {
+    if (!this.addressSummary$ && (!this.address || !this.stats)) {
      return;
    }
+    if (changes.defaultFiat) {
+      this.selected['Fiat'] = !!this.defaultFiat;
+    }
    if (changes.address || changes.isPubkey || changes.addressSummary$ || changes.stats) {
      if (this.subscription) {
        this.subscription.unsubscribe();
@@ -118,7 +123,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
                    } else if (this.conversions && this.conversions['USD']) {
                      price = this.conversions['USD'];
                    }
-                    return { ...item, price: price }
+                    return { ...item, price: price };
                  });
                }
              }),
@@ -144,15 +149,16 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
  }

  prepareChartOptions(summary: AddressTxSummary[]) {
-    if (!summary || !this.stats) {
+    if (!summary) {
      return;
    }
-    
-    let total = (this.stats.funded_txo_sum - this.stats.spent_txo_sum);
+
+    const total = this.stats ? (this.stats.funded_txo_sum - this.stats.spent_txo_sum) : summary.reduce((acc, tx) => acc + tx.value, 0);
+    let runningTotal = total;
    const processData = summary.map(d => {
-        const balance = total;
-        const fiatBalance = total * d.price / 100_000_000;
-        total -= d.value;
+        const balance = runningTotal;
+        const fiatBalance = runningTotal * d.price / 100_000_000;
+        runningTotal -= d.value;
        return {
            time: d.time * 1000,
            balance,
@@ -160,7 +166,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
            d
        };
    }).reverse();
-    
+
    this.data = processData.filter(({ d }) => d.txid !== undefined).map(({ time, balance, d }) => [time, balance, d]);
    this.fiatData = processData.map(({ time, fiatBalance, balance, d }) => [time, fiatBalance, d, balance]);

@@ -172,12 +178,15 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
      this.fiatData = this.fiatData.filter(d => d[0] >= startFiat);
    }
    this.data.push(
-      {value: [now, this.stats.funded_txo_sum - this.stats.spent_txo_sum], symbol: 'none', tooltip: { show: false }}
+      {value: [now, total], symbol: 'none', tooltip: { show: false }}
    );

    const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1] ?? d.value[1])), 0);
    const minValue = this.data.reduce((acc, d) => Math.min(acc, Math.abs(d[1] ?? d.value[1])), maxValue);

+    this.adjustedRight = this.selected['Fiat'] ? +this.right + 40 : +this.right;
+    this.adjustedLeft = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? +this.left : +this.left - 40;
+
    this.chartOptions = {
      color: [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -193,10 +202,10 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
      grid: {
        top: 20,
        bottom: this.allowZoom ? 65 : 20,
-        right: this.right,
-        left: this.left,
+        right: this.adjustedRight,
+        left: this.adjustedLeft,
      },
-      legend: !this.stateService.isAnyTestnet() ? {
+      legend: (this.showLegend && !this.stateService.isAnyTestnet()) ? {
        data: [
          {
            name: $localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`,
@@ -244,21 +253,22 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
          let tooltip = '<div>';

          const hasTx = data[0].data[2].txid;
+          const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
+
+          tooltip += `<div>
+            <div style="text-align: right;">
+            <div><b>${date}</b></div>`;
+
          if (hasTx) {
            const header = data.length === 1
            ? `${data[0].data[2].txid.slice(0, 6)}...${data[0].data[2].txid.slice(-6)}`
            : `${data.length} transactions`;
-            tooltip += `<span><b>${header}</b></span>`;
+            tooltip += `<div><b>${header}</b></div>`;
          }
-          
-          const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
-          
-          tooltip += `<div>
-            <div style="text-align: right;">`;
-          
+
          const formatBTC = (val, decimal) => (val / 100_000_000).toFixed(decimal);
          const formatFiat = (val) => this.fiatCurrencyPipe.transform(val, null, 'USD');
-          
+
          const btcVal = btcData.reduce((total, d) => total + d.data[2].value, 0);
          const fiatVal = fiatData.reduce((total, d) => total + d.data[2].value * d.data[2].price / 100_000_000, 0);
          const btcColor = btcVal === 0 ? '' : (btcVal > 0 ? 'var(--green)' : 'var(--red)');
@@ -290,7 +300,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
            }
          }

-          tooltip += `</div><span>${date}</span></div>`;
+          tooltip += `</div></div>`;
          return tooltip;
        }.bind(this)
      },
@@ -306,22 +316,26 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
          type: 'value',
          position: 'left',
          axisLabel: {
+            show: this.showYAxis,
            color: 'rgb(110, 112, 121)',
            formatter: (val): string => {
              let valSpan = maxValue - (this.period === 'all' ? 0 : minValue);
              if (valSpan > 100_000_000_000) {
-                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0)} BTC`;
+                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0, undefined, true)} BTC`;
              }
              else if (valSpan > 1_000_000_000) {
-                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2)} BTC`;
+                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2, undefined, true)} BTC`;
              } else if (valSpan > 100_000_000) {
                return `${(val / 100_000_000).toFixed(1)} BTC`;
              } else if (valSpan > 10_000_000) {
                return `${(val / 100_000_000).toFixed(2)} BTC`;
              } else if (valSpan > 1_000_000) {
+                if (maxValue > 100_000_000_000) {
+                  return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 3, undefined, true)} BTC`;
+                }
                return `${(val / 100_000_000).toFixed(3)} BTC`;
              } else {
-                return `${this.amountShortenerPipe.transform(val, 0)} sats`;
+                return `${this.amountShortenerPipe.transform(val, 0, undefined, true)} sats`;
              }
            }
          },
@@ -333,9 +347,10 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
        {
          type: 'value',
          axisLabel: {
+            show: this.showYAxis,
            color: 'rgb(110, 112, 121)',
            formatter: function(val) {
-              return this.fiatShortenerPipe.transform(val, null, 'USD');
+              return `$${this.amountShortenerPipe.transform(val, 3, undefined, true, true)}`;
            }.bind(this)
          },
          splitLine: {
@@ -389,8 +404,8 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
        type: 'slider',
        brushSelect: false,
        realtime: true,
-        left: this.left,
-        right: this.right,
+        left: this.adjustedLeft,
+        right: this.adjustedRight,
        selectedDataBackground: {
          lineStyle: {
            color: '#fff',
@@ -403,7 +418,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {

  onChartClick(e) {
    if (this.hoverData?.length && this.hoverData[0]?.[2]?.txid) {
-      this.zone.run(() => { 
+      this.zone.run(() => {
        const url = this.relativeUrlPipe.transform(`/tx/${this.hoverData[0][2].txid}`);
        if (e.event.event.shiftKey || e.event.event.ctrlKey || e.event.event.metaKey) {
          window.open(url);
@@ -420,26 +435,26 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {

  onLegendSelectChanged(e) {
    this.selected = e.selected;
-    this.right = this.selected['Fiat'] ? +this.initialRight + 40 : this.initialRight;
-    this.left = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? this.initialLeft : +this.initialLeft - 40;
+    this.adjustedRight = this.selected['Fiat'] ? +this.right + 40 : +this.right;
+    this.adjustedLeft = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? +this.left : +this.left - 40;

    this.chartOptions = {
      grid: {
-        right: this.right,
-        left: this.left,
+        right: this.adjustedRight,
+        left: this.adjustedLeft,
      },
      legend: {
        selected: this.selected,
      },
      dataZoom: this.allowZoom ? [{
-        left: this.left,
-        right: this.right,
+        left: this.adjustedLeft,
+        right: this.adjustedRight,
      }, {
-        left: this.left,
-        right: this.right,
+        left: this.adjustedLeft,
+        right: this.adjustedRight,
      }] : undefined
    };
-    
+
    if (this.chartInstance) {
      this.chartInstance.setOption(this.chartOptions);
    }
@@ -468,7 +483,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
    // Add a point at today's date to make the graph end at the current time
    extendedSummary.unshift({ time: Date.now() / 1000, value: 0 });
    extendedSummary.reverse();
-    
+
    let oneHour = 60 * 60;
    // Fill gaps longer than interval
    for (let i = 0; i < extendedSummary.length - 1; i++) {
@@ -481,7 +496,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
        i += hours - 1;
      }
    }
-  
+
    return extendedSummary.reverse();
  }
 }
--- a/frontend/src/app/components/address-group/address-group.component.ts
+++ b/frontend/src/app/components/address-group/address-group.component.ts
@@ -1,15 +1,15 @@
 import { Component, OnInit, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
 import { switchMap, catchError } from 'rxjs/operators';
-import { Address, Transaction } from '../../interfaces/electrs.interface';
-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 { Address, Transaction } from '@interfaces/electrs.interface';
+import { WebsocketService } from '@app/services/websocket.service';
+import { StateService } from '@app/services/state.service';
+import { AudioService } from '@app/services/audio.service';
+import { ApiService } from '@app/services/api.service';
 import { of, Subscription, forkJoin } from 'rxjs';
-import { SeoService } from '../../services/seo.service';
-import { AddressInformation } from '../../interfaces/node-api.interface';
+import { SeoService } from '@app/services/seo.service';
+import { AddressInformation } from '@interfaces/node-api.interface';

@Component({
  selector: 'app-address-group',
--- a/frontend/src/app/components/address-labels/address-labels.component.ts
+++ b/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 '../../services/state.service';
-import { AddressType, AddressTypeInfo } from '../../shared/address-utils';
+import { Vin, Vout } from '@interfaces/electrs.interface';
+import { StateService } from '@app/services/state.service';
+import { AddressType, AddressTypeInfo } from '@app/shared/address-utils';

@Component({
  selector: 'app-address-labels',
--- a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
+++ b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
@@ -12,7 +12,7 @@
          <app-truncate [text]="transaction.txid" [lastChars]="5"></app-truncate>
        </a>
      </td>
-      <td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" digitsInfo="1.2-4" [noFiat]="true"></app-amount></td>
+      <td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" [digitsInfo]="getAmountDigits(transaction.value)" [noFiat]="true"></app-amount></td>
      <td class="table-cell-fiat" ><app-fiat [value]="transaction.value" [blockConversion]="transaction.price" digitsInfo="1.0-0"></app-fiat></td>
      <td class="table-cell-date"><app-time kind="since" [time]="transaction.time" [fastRender]="true" [showTooltip]="true"></app-time></td>
    </tr>
--- a/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.ts
+++ b/frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.ts
@@ -1,9 +1,9 @@
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { StateService } from '../../services/state.service';
-import { Address, AddressTxSummary } from '../../interfaces/electrs.interface';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { StateService } from '@app/services/state.service';
+import { Address, AddressTxSummary } from '@interfaces/electrs.interface';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
 import { Observable, Subscription, catchError, map, of, switchMap, zip } from 'rxjs';
-import { PriceService } from '../../services/price.service';
+import { PriceService } from '@app/services/price.service';

@Component({
  selector: 'app-address-transactions-widget',
@@ -43,7 +43,7 @@ export class AddressTransactionsWidgetComponent implements OnInit, OnChanges, On

  startAddressSubscription(): void {
    this.isLoading = true;
-    if (!this.address || !this.addressInfo) {
+    if (!this.addressSummary$ && (!this.address || !this.addressInfo)) {
      return;
    }
    this.transactions$ = (this.addressSummary$ || (this.isPubkey
@@ -55,7 +55,7 @@ export class AddressTransactionsWidgetComponent implements OnInit, OnChanges, On
      })
    )).pipe(
      map(summary => {
-        return summary?.slice(0, 6);
+        return summary?.filter(tx => Math.abs(tx.value) >= 1000000)?.slice(0, 6);
      }),
      switchMap(txs => {
        return (zip(txs.map(tx => this.priceService.getBlockPrice$(tx.time, txs.length < 3, this.currency).pipe(
@@ -68,6 +68,12 @@ export class AddressTransactionsWidgetComponent implements OnInit, OnChanges, On
        ))));
      })
    );
+
+  }
+
+  getAmountDigits(value: number): string {
+    const decimals = Math.max(0, 4 - Math.ceil(Math.log10(Math.abs(value / 100_000_000))));
+    return `1.${decimals}-${decimals}`;
  }

  ngOnDestroy(): void {
--- a/frontend/src/app/components/address/address-preview.component.ts
+++ b/frontend/src/app/components/address/address-preview.component.ts
@@ -1,16 +1,16 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
 import { switchMap, filter, catchError, map, tap } from 'rxjs/operators';
-import { Address, Transaction } from '../../interfaces/electrs.interface';
-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 { Address, Transaction } from '@interfaces/electrs.interface';
+import { StateService } from '@app/services/state.service';
+import { OpenGraphService } from '@app/services/opengraph.service';
+import { AudioService } from '@app/services/audio.service';
+import { ApiService } from '@app/services/api.service';
 import { of, merge, Subscription, Observable } from 'rxjs';
-import { SeoService } from '../../services/seo.service';
-import { seoDescriptionNetwork } from '../../shared/common.utils';
-import { AddressInformation } from '../../interfaces/node-api.interface';
+import { SeoService } from '@app/services/seo.service';
+import { seoDescriptionNetwork } from '@app/shared/common.utils';
+import { AddressInformation } from '@interfaces/node-api.interface';

@Component({
  selector: 'app-address-preview',
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -117,7 +117,7 @@
      </h2>
    </div>

-    <app-transactions-list [transactions]="transactions" [showConfirmations]="true" [address]="address.address" (loadMore)="loadMore()"></app-transactions-list>
+    <app-transactions-list [transactions]="transactions" [showConfirmations]="true" [addresses]="[address.address]" (loadMore)="loadMore()"></app-transactions-list>

    <div class="text-center">
      <ng-template [ngIf]="isLoadingTransactions">
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -1,17 +1,17 @@
 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
 import { switchMap, filter, catchError, map, tap } from 'rxjs/operators';
-import { Address, ChainStats, Transaction, Utxo, Vin } from '../../interfaces/electrs.interface';
-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 { Address, ChainStats, Transaction, Utxo, Vin } from '@interfaces/electrs.interface';
+import { WebsocketService } from '@app/services/websocket.service';
+import { StateService } from '@app/services/state.service';
+import { AudioService } from '@app/services/audio.service';
+import { ApiService } from '@app/services/api.service';
 import { of, merge, Subscription, Observable, forkJoin } from 'rxjs';
-import { SeoService } from '../../services/seo.service';
-import { seoDescriptionNetwork } from '../../shared/common.utils';
-import { AddressInformation } from '../../interfaces/node-api.interface';
-import { AddressTypeInfo } from '../../shared/address-utils';
+import { SeoService } from '@app/services/seo.service';
+import { seoDescriptionNetwork } from '@app/shared/common.utils';
+import { AddressInformation } from '@interfaces/node-api.interface';
+import { AddressTypeInfo } from '@app/shared/address-utils';

 class AddressStats implements ChainStats {
  address: string;
--- a/frontend/src/app/components/addresses-treemap/addresses-treemap.component.html
+++ b/frontend/src/app/components/addresses-treemap/addresses-treemap.component.html
@@ -0,0 +1,10 @@
+<div class="addresses-treemap-container">
+  <div *ngIf="addresses" style="height: 300px">
+    <div *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
+    </div>
+  </div>
+
+  <div *ngIf="!stateService.isBrowser || isLoading" class="text-center loading-spinner">
+    <div class="spinner-border text-light"></div>
+  </div>
+</div>
--- a/frontend/src/app/components/addresses-treemap/addresses-treemap.component.scss
+++ b/frontend/src/app/components/addresses-treemap/addresses-treemap.component.scss
@@ -0,0 +1,17 @@
+.node-channels-container {
+  position: relative;
+}
+
+.loading-spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+.spinner-border {
+  position: relative;
+  top: 225px;
+}
--- a/frontend/src/app/components/addresses-treemap/addresses-treemap.component.ts
+++ b/frontend/src/app/components/addresses-treemap/addresses-treemap.component.ts
@@ -0,0 +1,150 @@
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import { EChartsOption, TreemapSeriesOption } from '@app/graphs/echarts';
+import { lerpColor } from '@app/shared/graphs.utils';
+import { AmountShortenerPipe } from '@app/shared/pipes/amount-shortener.pipe';
+import { LightningApiService } from '@app/lightning/lightning-api.service';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '@app/services/state.service';
+import { Address } from '@interfaces/electrs.interface';
+import { formatNumber } from '@angular/common';
+
+@Component({
+  selector: 'app-addresses-treemap',
+  templateUrl: './addresses-treemap.component.html',
+  styleUrls: ['./addresses-treemap.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddressesTreemap implements OnChanges {
+  @Input() addresses: Address[];
+  @Input() isLoading: boolean = false;
+
+  chartInstance: any;
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private lightningApiService: LightningApiService,
+    private amountShortenerPipe: AmountShortenerPipe,
+    private zone: NgZone,
+    private router: Router,
+    public stateService: StateService,
+  ) {}
+
+  ngOnChanges(): void {
+    this.prepareChartOptions();
+  }
+
+  prepareChartOptions(): void {
+    const data = this.addresses.map(address => ({
+      address: address.address,
+      value: address.chain_stats.funded_txo_sum - address.chain_stats.spent_txo_sum,
+      stats: address.chain_stats,
+    }));
+    // only consider visible items for the color gradient
+    const totalValue = data.reduce((acc, address) => acc + address.value, 0);
+    const maxTxs = data.filter(address => address.value > (totalValue / 2000)).reduce((max, address) => Math.max(max, address.stats.tx_count), 0);
+    const dataItems = data.map(address => ({
+      ...address,
+      itemStyle: {
+        color: lerpColor('#1E88E5', '#D81B60', address.stats.tx_count / maxTxs),
+      }
+    }));
+    this.chartOptions = {
+      tooltip: {
+        trigger: 'item',
+        textStyle: {
+          align: 'left',
+        }
+      },
+      series: <TreemapSeriesOption[]>[
+        {
+          height: 300,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          top: 0,
+          roam: false,
+          type: 'treemap',
+          data: dataItems,
+          nodeClick: 'link',
+          progressive: 100,
+          tooltip: {
+            show: true,
+            backgroundColor: 'rgba(17, 19, 31, 1)',
+            borderRadius: 4,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+            textStyle: {
+              color: '#b1b1b1',
+            },
+            borderColor: '#000',
+            formatter: (value): string => {
+              if (!value.data.address) {
+                return '';
+              }
+              return `
+                <table style="table-layout: fixed;">
+                  <tbody>
+                    <tr>
+                      <td colspan="2"><b style="color: white; margin-left: 2px">${value.data.address}</b></td>
+                    </tr>
+                    <tr>
+                      <td>Received</td>
+                      <td style="text-align: right">${this.formatValue(value.data.stats.funded_txo_sum)}</td>
+                    </tr>
+                    <tr>
+                      <td>Sent</td>
+                      <td style="text-align: right">${this.formatValue(value.data.stats.spent_txo_sum)}</td>
+                    </tr>
+                    <tr>
+                      <td>Balance</td>
+                      <td style="text-align: right">${this.formatValue(value.data.stats.funded_txo_sum - value.data.stats.spent_txo_sum)}</td>
+                    </tr>
+                    <tr>
+                      <td>Transaction count</td>
+                      <td style="text-align: right">${value.data.stats.tx_count}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              `;
+            }
+          },
+          itemStyle: {
+            borderColor: 'black',
+            borderWidth: 1,
+          },
+          breadcrumb: {
+            show: false,
+          }
+        }
+      ]
+    };    
+  }
+
+  formatValue(sats: number): string {
+    if (sats > 100000000) {
+      return formatNumber(sats / 100000000, this.locale, '1.2-2') + ' BTC';
+    } else {
+     return this.amountShortenerPipe.transform(sats, 2) + ' sats';
+    }
+  }
+
+  onChartInit(ec: any): void {
+    this.chartInstance = ec;
+
+    this.chartInstance.on('click', (e) => {
+      //@ts-ignore
+      if (!e.data.address) {
+        return;
+      }
+      this.zone.run(() => {
+        //@ts-ignore
+        const url = new RelativeUrlPipe(this.stateService).transform(`/address/${e.data.address}`);
+        this.router.navigate([url]);
+      });
+    });
+  }
+}
--- a/frontend/src/app/components/amount-selector/amount-selector.component.ts
+++ b/frontend/src/app/components/amount-selector/amount-selector.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { StorageService } from '../../services/storage.service';
-import { StateService } from '../../services/state.service';
+import { StorageService } from '@app/services/storage.service';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-amount-selector',
--- a/frontend/src/app/components/amount/amount.component.ts
+++ b/frontend/src/app/components/amount/amount.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { StateService } from '../../services/state.service';
+import { StateService } from '@app/services/state.service';
 import { Observable, Subscription } from 'rxjs';
-import { Price } from '../../services/price.service';
+import { Price } from '@app/services/price.service';

@Component({
  selector: 'app-amount',
--- a/frontend/src/app/components/app/app.component.ts
+++ b/frontend/src/app/components/app/app.component.ts
@@ -1,11 +1,11 @@
 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 '../../services/state.service';
-import { OpenGraphService } from '../../services/opengraph.service';
+import { StateService } from '@app/services/state.service';
+import { OpenGraphService } from '@app/services/opengraph.service';
 import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
-import { ThemeService } from '../../services/theme.service';
-import { SeoService } from '../../services/seo.service';
+import { ThemeService } from '@app/services/theme.service';
+import { SeoService } from '@app/services/seo.service';

@Component({
  selector: 'app-root',
--- a/frontend/src/app/components/asset-circulation/asset-circulation.component.ts
+++ b/frontend/src/app/components/asset-circulation/asset-circulation.component.ts
@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { moveDec } from '../../bitcoin.utils';
-import { AssetsService } from '../../services/assets.service';
-import { ElectrsApiService } from '../../services/electrs-api.service';
-import { environment } from '../../../environments/environment';
+import { moveDec } from '@app/bitcoin.utils';
+import { AssetsService } from '@app/services/assets.service';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { environment } from '@environments/environment';

@Component({
  selector: 'app-asset-circulation',
--- a/frontend/src/app/components/asset/asset.component.ts
+++ b/frontend/src/app/components/asset/asset.component.ts
@@ -1,17 +1,17 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
 import { switchMap, filter, catchError, take } from 'rxjs/operators';
-import { Asset, Transaction } from '../../interfaces/electrs.interface';
-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 { Asset, Transaction } from '@interfaces/electrs.interface';
+import { WebsocketService } from '@app/services/websocket.service';
+import { StateService } from '@app/services/state.service';
+import { AudioService } from '@app/services/audio.service';
+import { ApiService } from '@app/services/api.service';
 import { of, merge, Subscription, combineLatest } from 'rxjs';
-import { SeoService } from '../../services/seo.service';
-import { environment } from '../../../environments/environment';
-import { AssetsService } from '../../services/assets.service';
-import { moveDec } from '../../bitcoin.utils';
+import { SeoService } from '@app/services/seo.service';
+import { environment } from '@environments/environment';
+import { AssetsService } from '@app/services/assets.service';
+import { moveDec } from '@app/bitcoin.utils';

@Component({
  selector: 'app-asset',
--- a/frontend/src/app/components/assets/asset-group/asset-group.component.ts
+++ b/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 '../../../services/api.service';
-import { AssetsService } from '../../../services/assets.service';
+import { ApiService } from '@app/services/api.service';
+import { AssetsService } from '@app/services/assets.service';

@Component({
  selector: 'app-asset-group',
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ApiService } from '../../../services/api.service';
-import { StateService } from '../../../services/state.service';
+import { ApiService } from '@app/services/api.service';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-assets-featured',
--- a/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
@@ -4,12 +4,12 @@ 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 '../../../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 '../../../../environments/environment';
+import { AssetExtended } from '@interfaces/electrs.interface';
+import { AssetsService } from '@app/services/assets.service';
+import { SeoService } from '@app/services/seo.service';
+import { StateService } from '@app/services/state.service';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { environment } from '@environments/environment';

@Component({
  selector: 'app-assets-nav',
--- a/frontend/src/app/components/assets/assets.component.ts
+++ b/frontend/src/app/components/assets/assets.component.ts
@@ -1,13 +1,13 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { AssetsService } from '../../services/assets.service';
-import { environment } from '../../../environments/environment';
+import { AssetsService } from '@app/services/assets.service';
+import { environment } from '@environments/environment';
 import { UntypedFormGroup } 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 '../../interfaces/electrs.interface';
-import { SeoService } from '../../services/seo.service';
-import { StateService } from '../../services/state.service';
+import { AssetExtended } from '@interfaces/electrs.interface';
+import { SeoService } from '@app/services/seo.service';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-assets',
--- a/frontend/src/app/components/balance-widget/balance-widget.component.html
+++ b/frontend/src/app/components/balance-widget/balance-widget.component.html
@@ -4,10 +4,10 @@
      <div class="item">
        <h5 class="card-title" i18n="dashboard.btc-holdings">BTC Holdings</h5>
        <div class="card-text">
-          {{ ((addressInfo.chain_stats.funded_txo_sum - addressInfo.chain_stats.spent_txo_sum) / 100_000_000) | number: '1.2-2' }} <span class="symbol" i18n="shared.btc|BTC">BTC</span>
+          {{ ((total) / 100_000_000) | number: '1.2-2' }} <span class="symbol" i18n="shared.btc|BTC">BTC</span>
        </div>
        <div class="symbol">
-          <app-fiat [value]="(addressInfo.chain_stats.funded_txo_sum - addressInfo.chain_stats.spent_txo_sum)"></app-fiat>
+          <app-fiat [value]="(total)"></app-fiat>
        </div>
      </div>
      <div class="item">
--- a/frontend/src/app/components/balance-widget/balance-widget.component.ts
+++ b/frontend/src/app/components/balance-widget/balance-widget.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { StateService } from '../../services/state.service';
-import { Address, AddressTxSummary } from '../../interfaces/electrs.interface';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { StateService } from '@app/services/state.service';
+import { Address, AddressTxSummary } from '@interfaces/electrs.interface';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
 import { Observable, catchError, of } from 'rxjs';

@Component({
@@ -19,6 +19,7 @@ export class BalanceWidgetComponent implements OnInit, OnChanges {
  isLoading: boolean = true;
  error: any;

+  total: number = 0;
  delta7d: number = 0;
  delta30d: number = 0;

@@ -34,7 +35,7 @@ export class BalanceWidgetComponent implements OnInit, OnChanges {

  ngOnChanges(changes: SimpleChanges): void {
    this.isLoading = true;
-    if (!this.address || !this.addressInfo) {
+    if (!this.addressSummary$ && (!this.address || !this.addressInfo)) {
      return;
    }
    (this.addressSummary$ || (this.isPubkey
@@ -57,6 +58,7 @@ export class BalanceWidgetComponent implements OnInit, OnChanges {
  calculateStats(summary: AddressTxSummary[]): void {
    let weekTotal = 0;
    let monthTotal = 0;
+    this.total = this.addressInfo ? this.addressInfo.chain_stats.funded_txo_sum - this.addressInfo.chain_stats.spent_txo_sum : summary.reduce((acc, tx) => acc + tx.value, 0);

    const weekAgo = (new Date(new Date().setHours(0, 0, 0, 0) - (7 * 24 * 60 * 60 * 1000)).getTime()) / 1000;
    const monthAgo = (new Date(new Date().setHours(0, 0, 0, 0) - (30 * 24 * 60 * 60 * 1000)).getTime()) / 1000;
--- a/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.ts
+++ b/frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.ts
@@ -4,7 +4,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription, of, timer } from 'rxjs';
 import { filter, repeat, retry, switchMap, take, tap } from 'rxjs/operators';
-import { ServicesApiServices } from '../../services/services-api.service';
+import { ServicesApiServices } from '@app/services/services-api.service';

@Component({
  selector: 'app-bitcoin-invoice',
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
@@ -1,17 +1,17 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
-import { echarts, EChartsOption } from '../../graphs/echarts';
+import { echarts, EChartsOption } from '@app/graphs/echarts';
 import { Observable, combineLatest, of } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../services/api.service';
-import { SeoService } from '../../services/seo.service';
+import { ApiService } from '@app/services/api.service';
+import { SeoService } from '@app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-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 { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '@app/shared/graphs.utils';
+import { StorageService } from '@app/services/storage.service';
+import { MiningService } from '@app/services/mining.service';
+import { selectPowerOfTen } from '@app/bitcoin.utils';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '@app/services/state.service';
 import { ActivatedRoute, Router } from '@angular/router';

@Component({
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
-import { echarts, EChartsOption } from '../../graphs/echarts';
+import { echarts, EChartsOption } from '@app/graphs/echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../services/api.service';
-import { SeoService } from '../../services/seo.service';
+import { ApiService } from '@app/services/api.service';
+import { SeoService } from '@app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { download, formatterXAxis } from '../../shared/graphs.utils';
-import { StorageService } from '../../services/storage.service';
-import { MiningService } from '../../services/mining.service';
+import { download, formatterXAxis } from '@app/shared/graphs.utils';
+import { StorageService } from '@app/services/storage.service';
+import { MiningService } from '@app/services/mining.service';
 import { ActivatedRoute } from '@angular/router';
-import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
-import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
-import { StateService } from '../../services/state.service';
+import { FiatShortenerPipe } from '@app/shared/pipes/fiat-shortener.pipe';
+import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-block-fees-graph',
--- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
+++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
@@ -1,19 +1,19 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
-import { EChartsOption } from '../../graphs/echarts';
+import { EChartsOption } from '@app/graphs/echarts';
 import { Observable } from 'rxjs';
 import { catchError, map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../services/api.service';
-import { SeoService } from '../../services/seo.service';
+import { ApiService } from '@app/services/api.service';
+import { SeoService } from '@app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { download, formatterXAxis } from '../../shared/graphs.utils';
+import { download, formatterXAxis } from '@app/shared/graphs.utils';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
-import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
-import { StateService } from '../../services/state.service';
-import { MiningService } from '../../services/mining.service';
-import { StorageService } from '../../services/storage.service';
-import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { FiatShortenerPipe } from '@app/shared/pipes/fiat-shortener.pipe';
+import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';
+import { StateService } from '@app/services/state.service';
+import { MiningService } from '@app/services/mining.service';
+import { StorageService } from '@app/services/storage.service';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';

@Component({
  selector: 'app-block-fees-subsidy-graph',
--- a/frontend/src/app/components/block-filters/block-filters.component.ts
+++ b/frontend/src/app/components/block-filters/block-filters.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef, OnChanges, SimpleChanges, OnInit, OnDestroy } from '@angular/core';
-import { ActiveFilter, FilterGroups, FilterMode, GradientMode, TransactionFilters } from '../../shared/filters.utils';
-import { StateService } from '../../services/state.service';
+import { ActiveFilter, FilterGroups, FilterMode, GradientMode, TransactionFilters } from '@app/shared/filters.utils';
+import { StateService } from '@app/services/state.service';
 import { Subscription } from 'rxjs';


@@ -115,4 +115,4 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
  ngOnDestroy(): void {
    this.filterSubscription.unsubscribe();
  }
-}
+}
--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
+++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
@@ -1,16 +1,16 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
-import { EChartsOption } from '../../graphs/echarts';
+import { EChartsOption } from '@app/graphs/echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../services/api.service';
-import { SeoService } from '../../services/seo.service';
+import { ApiService } from '@app/services/api.service';
+import { SeoService } from '@app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
-import { StorageService } from '../../services/storage.service';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '@app/shared/graphs.utils';
+import { StorageService } from '@app/services/storage.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
-import { StateService } from '../../services/state.service';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-block-health-graph',
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -1,17 +1,17 @@
 import { Component, ElementRef, ViewChild, HostListener, Input, Output, EventEmitter, NgZone, AfterViewInit, OnDestroy, OnChanges } from '@angular/core';
-import { TransactionStripped } from '../../interfaces/node-api.interface';
-import { FastVertexArray } from './fast-vertex-array';
-import BlockScene from './block-scene';
-import TxSprite from './tx-sprite';
-import TxView from './tx-view';
-import { Color, Position } from './sprite-types';
-import { Price } from '../../services/price.service';
-import { StateService } from '../../services/state.service';
-import { ThemeService } from '../../services/theme.service';
+import { TransactionStripped } from '@interfaces/node-api.interface';
+import { FastVertexArray } from '@components/block-overview-graph/fast-vertex-array';
+import BlockScene from '@components/block-overview-graph/block-scene';
+import TxSprite from '@components/block-overview-graph/tx-sprite';
+import TxView from '@components/block-overview-graph/tx-view';
+import { Color, Position } from '@components/block-overview-graph/sprite-types';
+import { Price } from '@app/services/price.service';
+import { StateService } from '@app/services/state.service';
+import { ThemeService } from '@app/services/theme.service';
 import { Subscription } from 'rxjs';
-import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from './utils';
-import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
-import { detectWebGL } from '../../shared/graphs.utils';
+import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from '@components/block-overview-graph/utils';
+import { ActiveFilter, FilterMode, toFlags } from '@app/shared/filters.utils';
+import { detectWebGL } from '@app/shared/graphs.utils';

 const unmatchedOpacity = 0.2;
 const unmatchedAuditColors = {
--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@@ -1,9 +1,9 @@
-import { FastVertexArray } from './fast-vertex-array';
-import TxView from './tx-view';
-import { TransactionStripped } from '../../interfaces/node-api.interface';
-import { Color, Position, Square, ViewUpdateParams } from './sprite-types';
-import { defaultColorFunction, contrastColorFunction } from './utils';
-import { ThemeService } from '../../services/theme.service';
+import { FastVertexArray } from '@components/block-overview-graph/fast-vertex-array';
+import TxView from '@components/block-overview-graph/tx-view';
+import { TransactionStripped } from '@interfaces/node-api.interface';
+import { Color, Position, Square, ViewUpdateParams } from '@components/block-overview-graph/sprite-types';
+import { defaultColorFunction, contrastColorFunction } from '@components/block-overview-graph/utils';
+import { ThemeService } from '@app/services/theme.service';

 export default class BlockScene {
  scene: { count: number, offset: { x: number, y: number}};
@@ -917,4 +917,4 @@ class BlockLayout {

 function feeRateDescending(a: TxView, b: TxView) {
  return b.feerate - a.feerate;
-}
+}
--- a/frontend/src/app/components/block-overview-graph/fast-vertex-array.ts
+++ b/frontend/src/app/components/block-overview-graph/fast-vertex-array.ts
@@ -8,7 +8,7 @@
  or compacting into a smaller Float32Array when there's space to do so.
 */

-import TxSprite from './tx-sprite';
+import TxSprite from '@components/block-overview-graph/tx-sprite';

 export class FastVertexArray {
  length: number;
--- a/frontend/src/app/components/block-overview-graph/tx-sprite.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-sprite.ts
@@ -1,5 +1,5 @@
-import { FastVertexArray } from './fast-vertex-array';
-import { InterpolatedAttribute, Attributes, OptionalAttributes, SpriteUpdateParams, Update } from './sprite-types';
+import { FastVertexArray } from '@components/block-overview-graph/fast-vertex-array';
+import { InterpolatedAttribute, Attributes, OptionalAttributes, SpriteUpdateParams, Update } from '@components/block-overview-graph/sprite-types';

 const attribKeys = ['a', 'b', 't', 'v'];
 const updateKeys = ['x', 'y', 's', 'r', 'g', 'b', 'a'];
--- a/frontend/src/app/components/block-overview-graph/tx-view.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-view.ts
@@ -1,10 +1,10 @@
-import TxSprite from './tx-sprite';
-import { FastVertexArray } from './fast-vertex-array';
-import { SpriteUpdateParams, Square, Color, ViewUpdateParams } from './sprite-types';
-import { hexToColor } from './utils';
-import BlockScene from './block-scene';
-import { TransactionStripped } from '../../interfaces/node-api.interface';
-import { TransactionFlags } from '../../shared/filters.utils';
+import TxSprite from '@components/block-overview-graph/tx-sprite';
+import { FastVertexArray } from '@components/block-overview-graph/fast-vertex-array';
+import { SpriteUpdateParams, Square, Color, ViewUpdateParams } from '@components/block-overview-graph/sprite-types';
+import { hexToColor } from '@components/block-overview-graph/utils';
+import BlockScene from '@components/block-overview-graph/block-scene';
+import { TransactionStripped } from '@interfaces/node-api.interface';
+import { TransactionFlags } from '@app/shared/filters.utils';

 const hoverTransitionTime = 300;
 const defaultHoverColor = hexToColor('1bd8f4');
--- a/frontend/src/app/components/block-overview-graph/utils.ts
+++ b/frontend/src/app/components/block-overview-graph/utils.ts
@@ -1,6 +1,6 @@
-import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../app.constants';
-import { Color } from './sprite-types';
-import TxView from './tx-view';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '@app/app.constants';
+import { Color } from '@components/block-overview-graph/sprite-types';
+import TxView from '@components/block-overview-graph/tx-view';

 export function hexToColor(hex: string): Color {
  return {
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts
@@ -1,9 +1,9 @@
 import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { Position } from '../../components/block-overview-graph/sprite-types.js';
-import { Price } from '../../services/price.service';
-import { TransactionStripped } from '../../interfaces/node-api.interface.js';
-import { Filter, FilterMode, TransactionFlags, toFilters } from '../../shared/filters.utils';
-import { Block } from '../../interfaces/electrs.interface.js';
+import { Position } from '@components/block-overview-graph/sprite-types.js';
+import { Price } from '@app/services/price.service';
+import { TransactionStripped } from '@interfaces/node-api.interface.js';
+import { Filter, FilterMode, TransactionFlags, toFilters } from '@app/shared/filters.utils';
+import { Block } from '@interfaces/electrs.interface.js';

@Component({
  selector: 'app-block-overview-tooltip',
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
-import { echarts, EChartsOption } from '../../graphs/echarts';
+import { echarts, EChartsOption } from '@app/graphs/echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../services/api.service';
-import { SeoService } from '../../services/seo.service';
+import { ApiService } from '@app/services/api.service';
+import { SeoService } from '@app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { download, formatterXAxis } from '../../shared/graphs.utils';
-import { MiningService } from '../../services/mining.service';
-import { StorageService } from '../../services/storage.service';
+import { download, formatterXAxis } from '@app/shared/graphs.utils';
+import { MiningService } from '@app/services/mining.service';
+import { StorageService } from '@app/services/storage.service';
 import { ActivatedRoute } from '@angular/router';
-import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
-import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
-import { StateService } from '../../services/state.service';
+import { FiatShortenerPipe } from '@app/shared/pipes/fiat-shortener.pipe';
+import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-block-rewards-graph',
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
@@ -1,16 +1,16 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
-import { EChartsOption} from '../../graphs/echarts';
+import { EChartsOption} from '@app/graphs/echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../services/api.service';
-import { SeoService } from '../../services/seo.service';
+import { ApiService } from '@app/services/api.service';
+import { SeoService } from '@app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { StorageService } from '../../services/storage.service';
-import { MiningService } from '../../services/mining.service';
+import { StorageService } from '@app/services/storage.service';
+import { MiningService } from '@app/services/mining.service';
 import { ActivatedRoute } from '@angular/router';
-import { download, formatterXAxis } from '../../shared/graphs.utils';
-import { StateService } from '../../services/state.service';
+import { download, formatterXAxis } from '@app/shared/graphs.utils';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-block-sizes-weights-graph',
--- a/frontend/src/app/components/block-view/block-view.component.ts
+++ b/frontend/src/app/components/block-view/block-view.component.ts
@@ -1,15 +1,15 @@
 import { Component, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
 import { switchMap, tap, catchError, shareReplay, filter } from 'rxjs/operators';
 import { of, Subscription } from 'rxjs';
-import { StateService } from '../../services/state.service';
-import { SeoService } from '../../services/seo.service';
-import { BlockExtended, TransactionStripped } from '../../interfaces/node-api.interface';
-import { ApiService } from '../../services/api.service';
-import { seoDescriptionNetwork } from '../../shared/common.utils';
-import { BlockOverviewGraphComponent } from '../block-overview-graph/block-overview-graph.component';
-import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '@app/services/state.service';
+import { SeoService } from '@app/services/seo.service';
+import { BlockExtended, TransactionStripped } from '@interfaces/node-api.interface';
+import { ApiService } from '@app/services/api.service';
+import { seoDescriptionNetwork } from '@app/shared/common.utils';
+import { BlockOverviewGraphComponent } from '@components/block-overview-graph/block-overview-graph.component';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';

 function bestFitResolution(min, max, n): number {
  const target = (min + max) / 2;
--- a/frontend/src/app/components/block/block-preview.component.ts
+++ b/frontend/src/app/components/block/block-preview.component.ts
@@ -1,16 +1,16 @@
 import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
 import { switchMap, tap, throttleTime, catchError, shareReplay, startWith, pairwise, filter } from 'rxjs/operators';
 import { of, Subscription, asyncScheduler, forkJoin } from 'rxjs';
-import { StateService } from '../../services/state.service';
-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 { seoDescriptionNetwork } from '../../shared/common.utils';
-import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
-import { ServicesApiServices } from '../../services/services-api.service';
+import { StateService } from '@app/services/state.service';
+import { SeoService } from '@app/services/seo.service';
+import { OpenGraphService } from '@app/services/opengraph.service';
+import { BlockExtended, TransactionStripped } from '@interfaces/node-api.interface';
+import { ApiService } from '@app/services/api.service';
+import { seoDescriptionNetwork } from '@app/shared/common.utils';
+import { BlockOverviewGraphComponent } from '@components/block-overview-graph/block-overview-graph.component';
+import { ServicesApiServices } from '@app/services/services-api.service';

@Component({
  selector: 'app-block-preview',
--- a/frontend/src/app/components/block/block-transactions.component.ts
+++ b/frontend/src/app/components/block/block-transactions.component.ts
@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { StateService } from '../../services/state.service';
-import { Transaction, Vout } from '../../interfaces/electrs.interface';
+import { StateService } from '@app/services/state.service';
+import { Transaction, Vout } from '@interfaces/electrs.interface';
 import { Observable, Subscription, catchError, combineLatest, map, of, startWith, switchMap, tap } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ElectrsApiService } from '../../services/electrs-api.service';
-import { PreloadService } from '../../services/preload.service';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { PreloadService } from '@app/services/preload.service';

@Component({
  selector: 'app-block-transactions',
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -1,23 +1,23 @@
 import { Component, OnInit, OnDestroy, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { ElectrsApiService } from '@app/services/electrs-api.service';
 import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, filter } from 'rxjs/operators';
 import { Observable, of, Subscription, asyncScheduler, EMPTY, combineLatest, forkJoin } from 'rxjs';
-import { StateService } from '../../services/state.service';
-import { SeoService } from '../../services/seo.service';
-import { WebsocketService } from '../../services/websocket.service';
-import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
-import { Acceleration, BlockAudit, 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';
-import { seoDescriptionNetwork } from '../../shared/common.utils';
-import { PriceService, Price } from '../../services/price.service';
-import { CacheService } from '../../services/cache.service';
-import { ServicesApiServices } from '../../services/services-api.service';
-import { PreloadService } from '../../services/preload.service';
-import { identifyPrioritizedTransactions } from '../../shared/transaction.utils';
+import { StateService } from '@app/services/state.service';
+import { SeoService } from '@app/services/seo.service';
+import { WebsocketService } from '@app/services/websocket.service';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { Acceleration, BlockAudit, BlockExtended, TransactionStripped } from '@interfaces/node-api.interface';
+import { ApiService } from '@app/services/api.service';
+import { BlockOverviewGraphComponent } from '@components/block-overview-graph/block-overview-graph.component';
+import { detectWebGL } from '@app/shared/graphs.utils';
+import { seoDescriptionNetwork } from '@app/shared/common.utils';
+import { PriceService, Price } from '@app/services/price.service';
+import { CacheService } from '@app/services/cache.service';
+import { ServicesApiServices } from '@app/services/services-api.service';
+import { PreloadService } from '@app/services/preload.service';
+import { identifyPrioritizedTransactions } from '@app/shared/transaction.utils';

@Component({
  selector: 'app-block',
@@ -822,4 +822,4 @@ export class BlockComponent implements OnInit, OnDestroy {
       this.fees = blockReward;
    }
  }
-}
+}
--- a/frontend/src/app/components/block/block.module.ts
+++ b/frontend/src/app/components/block/block.module.ts
@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
-import { BlockComponent } from './block.component';
-import { BlockTransactionsComponent } from './block-transactions.component';
-import { SharedModule } from '../../shared/shared.module';
+import { BlockComponent } from '@components/block/block.component';
+import { BlockTransactionsComponent } from '@components/block/block-transactions.component';
+import { SharedModule } from '@app/shared/shared.module';

 const routes: Routes = [
  {
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -1,10 +1,10 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Observable, Subscription, delay, filter, tap } from 'rxjs';
-import { StateService } from '../../services/state.service';
-import { specialBlocks } from '../../app.constants';
-import { BlockExtended } from '../../interfaces/node-api.interface';
+import { StateService } from '@app/services/state.service';
+import { specialBlocks } from '@app/app.constants';
+import { BlockExtended } from '@interfaces/node-api.interface';
 import { Location } from '@angular/common';
-import { CacheService } from '../../services/cache.service';
+import { CacheService } from '@app/services/cache.service';

 interface BlockchainBlock extends BlockExtended {
  placeholder?: boolean;
--- a/frontend/src/app/components/blockchain/blockchain.component.ts
+++ b/frontend/src/app/components/blockchain/blockchain.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
 import { firstValueFrom, Subscription } from 'rxjs';
-import { StateService } from '../../services/state.service';
-import { StorageService } from '../../services/storage.service';
+import { StateService } from '@app/services/state.service';
+import { StorageService } from '@app/services/storage.service';

@Component({
  selector: 'app-blockchain',
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -49,7 +49,7 @@
            </div>
          </td>
          <td class="timestamp" *ngIf="!widget" [ngClass]="{'widget': widget, 'legacy': !isMempoolModule}">
-            &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm:ss' }}
+            <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm:ss'" [unixTime]="block.timestamp" [hideTimeSince]="true"></app-timestamp>
          </td>
          <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !isMempoolModule}">
            <a
--- a/frontend/src/app/components/blocks-list/blocks-list.component.ts
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.ts
@@ -2,13 +2,14 @@ import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, I
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, combineLatest, Observable, timer, of, Subscription } from 'rxjs';
 import { debounceTime, delayWhen, filter, map, retryWhen, scan, skip, switchMap, tap, throttleTime } from 'rxjs/operators';
-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';
-import { SeoService } from '../../services/seo.service';
-import { OpenGraphService } from '../../services/opengraph.service';
-import { seoDescriptionNetwork } from '../../shared/common.utils';
+import { BlockExtended } from '@interfaces/node-api.interface';
+import { ApiService } from '@app/services/api.service';
+import { StateService } from '@app/services/state.service';
+import { WebsocketService } from '@app/services/websocket.service';
+import { SeoService } from '@app/services/seo.service';
+import { OpenGraphService } from '@app/services/opengraph.service';
+import { seoDescriptionNetwork } from '@app/shared/common.utils';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';

@Component({
  selector: 'app-blocks-list',
@@ -49,6 +50,7 @@ export class BlocksList implements OnInit {
    private ogService: OpenGraphService,
    private route: ActivatedRoute,
    private router: Router,
+    private relativeUrlPipe: RelativeUrlPipe,
    @Inject(LOCALE_ID) private locale: string,
  ) {
    this.isMempoolModule = this.stateService.env.BASE_MODULE === 'mempool';
@@ -182,7 +184,7 @@ export class BlocksList implements OnInit {
  }

  pageChange(page: number): void {
-    this.router.navigate(['blocks', page]);
+    this.router.navigate([this.relativeUrlPipe.transform('/blocks/'), page]);
  }

  trackByBlock(index: number, block: BlockExtended): number {
--- a/frontend/src/app/components/calculator/calculator.component.ts
+++ b/frontend/src/app/components/calculator/calculator.component.ts
@@ -2,8 +2,8 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { combineLatest, Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
-import { StateService } from '../../services/state.service';
-import { WebsocketService } from '../../services/websocket.service';
+import { StateService } from '@app/services/state.service';
+import { WebsocketService } from '@app/services/websocket.service';

@Component({
  selector: 'app-calculator',
--- a/frontend/src/app/components/clipboard/clipboard.component.html
+++ b/frontend/src/app/components/clipboard/clipboard.component.html
@@ -1,15 +1,17 @@
 <ng-template [ngIf]="button" [ngIfElse]="btnLink">
-  <button #btn [attr.data-clipboard-text]="text" [class]="class" type="button" [disabled]="text === ''">
-    <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;top: -2px;left: 1px;">
+  <button [class]="class" type="button" [disabled]="text === ''" style="box-shadow: none;" (click)="copyText()">
+    <span style="position: relative;top: -2px;left: 1px;">
      <app-svg-images name="clippy" [width]="widths[size]" viewBox="0 0 1000 1000"></app-svg-images>
+      <span *ngIf="showMessage" class="copied-message" style="top: 29px; left: -23.5px;">{{ copiedMessage }}</span>
    </span>
  </button>
 </ng-template>

 <ng-template #btnLink>
-  <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;">
-    <button #btn class="btn btn-sm btn-link pt-0 {{ leftPadding ? 'padding' : '' }}" [attr.data-clipboard-text]="text"> 
+  <span style="position: relative;">
+    <button class="btn btn-sm btn-link pt-0 {{ leftPadding ? 'padding' : '' }}" style="box-shadow: none;" (click)="copyText()">
      <app-svg-images name="clippy" [width]="widths[size]" viewBox="0 0 1000 1000"></app-svg-images>
    </button>
+    <span *ngIf="showMessage" class="copied-message" style="top: 29px; left: -23.5px;">{{ copiedMessage }}</span>
  </span>
 </ng-template>
--- a/frontend/src/app/components/clipboard/clipboard.component.scss
+++ b/frontend/src/app/components/clipboard/clipboard.component.scss
@@ -7,7 +7,19 @@
  padding-left: 0.4rem;
 }

-img {
-  position: relative;
-  left: -3px;
-}
+.copied-message {
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
+  color: var(--fg);
+  font-family: sans-serif;
+  font-size: .8rem;
+  font-weight: 400;
+  text-decoration: none;
+  text-align: left;
+  padding: .6em .75rem;
+  border-radius: 4px;
+  position: absolute;
+  white-space: nowrap;
+  box-shadow: 0 .5rem 1rem -.5rem #000;
+  z-index: 1000;
+  opacity: .9;
+}
--- a/frontend/src/app/components/clipboard/clipboard.component.ts
+++ b/frontend/src/app/components/clipboard/clipboard.component.ts
@@ -1,6 +1,4 @@
-import { Component, ViewChild, ElementRef, AfterViewInit, Input, ChangeDetectionStrategy } from '@angular/core';
-import * as ClipboardJS from 'clipboard';
-import * as tlite from 'tlite';
+import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-clipboard',
@@ -8,15 +6,14 @@ import * as tlite from 'tlite';
  styleUrls: ['./clipboard.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ClipboardComponent implements AfterViewInit {
-  @ViewChild('btn') btn: ElementRef;
-  @ViewChild('buttonWrapper') buttonWrapper: ElementRef;
+export class ClipboardComponent {
  @Input() button = false;
  @Input() class = 'btn btn-secondary ml-1';
  @Input() size: 'small' | 'normal' | 'large' = 'normal';
  @Input() text: string;
  @Input() leftPadding = true;
  copiedMessage: string = $localize`:@@clipboard.copied-message:Copied!`;
+  showMessage = false;

  widths = {
    small: '10',
@@ -24,22 +21,40 @@ export class ClipboardComponent implements AfterViewInit {
    large: '18',
  };

-  clipboard: any;
+  constructor(
+    private cd: ChangeDetectorRef,
+  ) { }

-  constructor() { }
-
-  ngAfterViewInit() {
-    this.clipboard = new ClipboardJS(this.btn.nativeElement);
-    this.clipboard.on('success', () => {
-      tlite.show(this.buttonWrapper.nativeElement);
-      setTimeout(() => {
-        tlite.hide(this.buttonWrapper.nativeElement);
-      }, 1000);
-    });
+  async copyText() {
+    if (this.text && !this.showMessage) {
+      try {
+        await this.copyToClipboard(this.text);
+        this.showMessage = true;
+        this.cd.markForCheck();
+        setTimeout(() => {
+          this.showMessage = false;
+          this.cd.markForCheck();
+        }, 1000);
+      } catch (error) {
+        console.error('Clipboard copy failed:', error);
+      }
+    }
  }

-  onDestroy() {
-    this.clipboard.destroy();
+  async copyToClipboard(text: string) {
+    if (navigator.clipboard) {
+      await navigator.clipboard.writeText(text);
+    } else {
+      // Use the 'out of viewport hidden text area' trick on non-secure contexts
+      const textarea = document.createElement('textarea');
+      textarea.value = this.text;
+      textarea.style.opacity = '0';
+      textarea.setAttribute('readonly', 'true'); // Don't trigger keyboard on mobile
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      textarea.remove();
+    }
  }

 }
--- a/frontend/src/app/components/clock-face/clock-face.component.ts
+++ b/frontend/src/app/components/clock-face/clock-face.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { Subscription, tap, timer } from 'rxjs';
-import { StateService } from '../../services/state.service';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-clock-face',
--- a/frontend/src/app/components/clock/clock.component.ts
+++ b/frontend/src/app/components/clock/clock.component.ts
@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Input, OnInit } from '@angular/core';
 import { Observable, Subscription, of, switchMap, tap } from 'rxjs';
-import { StateService } from '../../services/state.service';
-import { BlockExtended } from '../../interfaces/node-api.interface';
-import { WebsocketService } from '../../services/websocket.service';
-import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interface';
+import { StateService } from '@app/services/state.service';
+import { BlockExtended } from '@interfaces/node-api.interface';
+import { WebsocketService } from '@app/services/websocket.service';
+import { MempoolInfo, Recommendedfees } from '@interfaces/websocket.interface';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';

@Component({
  selector: 'app-clock',
--- a/frontend/src/app/components/clockchain/clockchain.component.ts
+++ b/frontend/src/app/components/clockchain/clockchain.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, OnChanges, ChangeDetectorRef } from '@angular/core';
 import { firstValueFrom, Subscription } from 'rxjs';
-import { StateService } from '../../services/state.service';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-clockchain',
--- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html
+++ b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html
@@ -238,7 +238,7 @@
                  <span>&nbsp;</span>
                  <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
                </a>
-                <app-address-graph [address]="widget.props.address" [addressSummary$]="addressSummary$" [period]="widget.props.period || 'all'" [stats]="address ? address.chain_stats : null" [widget]="true" [height]="graphHeight"></app-address-graph>
+                <app-address-graph [address]="widget.props.address" [addressSummary$]="addressSummary$" [period]="widget.props.period || 'all'" [stats]="address ? address.chain_stats : null" [widget]="true" [defaultFiat]="true" [height]="graphHeight"></app-address-graph>
              </div>
            </div>
          </div>
@@ -257,6 +257,38 @@
            </div>
          </div>
        }
+        @case ('walletBalance') {
+          <div class="col card-wrapper" [style.order]="isMobile && widget.mobileOrder || 8">
+            <div class="main-title" i18n="dashboard.treasury">Treasury</div>
+            <app-balance-widget [addressSummary$]="walletSummary$"></app-balance-widget>
+          </div>
+        }
+        @case ('wallet') {
+          <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
+            <div class="card graph-card">
+              <div class="card-body">
+                <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/wallet/' + widget.props.wallet | relativeUrl]">
+                  <h5 class="card-title d-inline" i18n="dashboard.balance-history">Balance History</h5>
+                  <span>&nbsp;</span>
+                  <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
+                </a>
+                <app-address-graph [addressSummary$]="walletSummary$" [period]="widget.props.period || 'all'" [widget]="true" [height]="graphHeight"></app-address-graph>
+              </div>
+            </div>
+          </div>
+        }
+        @case ('walletTransactions') {
+          <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
+            <div class="card">
+              <div class="card-body">
+                <span class="title-link">
+                  <h5 class="card-title d-inline" i18n="dashboard.treasury-transactions">Treasury Transactions</h5>
+                </span>
+                <app-address-transactions-widget [addressSummary$]="walletSummary$"></app-address-transactions-widget>
+              </div>
+            </div>
+          </div>
+        }
        @case ('twitter') {
          <div class="col" style="min-height:410px" [style.order]="isMobile && widget.mobileOrder || 8">
            <div class="card graph-card">
--- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts
+++ b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts
@@ -1,16 +1,16 @@
 import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { combineLatest, merge, Observable, of, Subject, Subscription } from 'rxjs';
 import { catchError, filter, map, scan, share, shareReplay, startWith, switchMap, tap } from 'rxjs/operators';
-import { BlockExtended, OptimizedMempoolStats, TransactionStripped } from '../../interfaces/node-api.interface';
-import { MempoolInfo, ReplacementInfo } from '../../interfaces/websocket.interface';
-import { ApiService } from '../../services/api.service';
-import { StateService } from '../../services/state.service';
-import { WebsocketService } from '../../services/websocket.service';
-import { SeoService } from '../../services/seo.service';
-import { ActiveFilter, FilterMode, GradientMode, toFlags } from '../../shared/filters.utils';
-import { detectWebGL } from '../../shared/graphs.utils';
-import { Address, AddressTxSummary } from '../../interfaces/electrs.interface';
-import { ElectrsApiService } from '../../services/electrs-api.service';
+import { BlockExtended, OptimizedMempoolStats, TransactionStripped } from '@interfaces/node-api.interface';
+import { MempoolInfo, ReplacementInfo } from '@interfaces/websocket.interface';
+import { ApiService } from '@app/services/api.service';
+import { StateService } from '@app/services/state.service';
+import { WebsocketService } from '@app/services/websocket.service';
+import { SeoService } from '@app/services/seo.service';
+import { ActiveFilter, FilterMode, GradientMode, toFlags } from '@app/shared/filters.utils';
+import { detectWebGL } from '@app/shared/graphs.utils';
+import { Address, AddressTxSummary } from '@interfaces/electrs.interface';
+import { ElectrsApiService } from '@app/services/electrs-api.service';

 interface MempoolBlocksData {
  blocks: number;
@@ -62,8 +62,10 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
  widgets;

  addressSubscription: Subscription;
+  walletSubscription: Subscription;
  blockTxSubscription: Subscription;
  addressSummary$: Observable<AddressTxSummary[]>;
+  walletSummary$: Observable<AddressTxSummary[]>;
  address: Address;

  goggleResolution = 82;
@@ -71,7 +73,7 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
    { index: 0, name: $localize`:@@dfc3c34e182ea73c5d784ff7c8135f087992dac1:All`, mode: 'and', filters: [], gradient: 'age' },
    { index: 1, name: $localize`Consolidation`, mode: 'and', filters: ['consolidation'], gradient: 'fee' },
    { index: 2, name: $localize`Coinjoin`, mode: 'and', filters: ['coinjoin'], gradient: 'fee' },
-    { index: 3, name: $localize`Data`, mode: 'or', filters: ['inscription', 'fake_pubkey', 'op_return'], gradient: 'fee' },
+    { index: 3, name: $localize`Data`, mode: 'or', filters: ['inscription', 'fake_pubkey', 'fake_scripthash', 'op_return'], gradient: 'fee' },
  ];
  goggleFlags = 0n;
  goggleMode: FilterMode = 'and';
@@ -107,6 +109,10 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
      this.websocketService.stopTrackingAddress();
      this.address = null;
    }
+    if (this.walletSubscription) {
+      this.walletSubscription.unsubscribe();
+      this.websocketService.stopTrackingWallet();
+    }
    this.destroy$.next(1);
    this.destroy$.complete();
  }
@@ -260,6 +266,7 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
    });

    this.startAddressSubscription();
+    this.startWalletSubscription();
  }

  handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
@@ -358,6 +365,75 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
    }
  }

+  startWalletSubscription(): void {
+    if (this.stateService.env.customize && this.stateService.env.customize.dashboard.widgets.some(w => w.props?.wallet)) {
+      const walletName = this.stateService.env.customize.dashboard.widgets.find(w => w.props?.wallet).props.wallet;
+      this.websocketService.startTrackingWallet(walletName);
+
+      this.walletSummary$ =  this.apiService.getWallet$(walletName).pipe(
+        catchError(e => {
+          return of({});
+        }),
+        switchMap(wallet => this.stateService.walletTransactions$.pipe(
+          startWith([]),
+          scan((summaries, newTransactions) => {
+            const newSummaries: AddressTxSummary[] = [];
+            for (const tx of newTransactions) {
+              const funded: Record<string, number> = {};
+              const spent: Record<string, number> = {};
+              const fundedCount: Record<string, number> = {};
+              const spentCount: Record<string, number> = {};
+              for (const vin of tx.vin) {
+                const address = vin.prevout?.scriptpubkey_address;
+                if (address && wallet[address]) {
+                  spent[address] = (spent[address] ?? 0) + (vin.prevout?.value ?? 0);
+                  spentCount[address] = (spentCount[address] ?? 0) + 1;
+                }
+              }
+              for (const vout of tx.vout) {
+                const address = vout.scriptpubkey_address;
+                if (address && wallet[address]) {
+                  funded[address] = (funded[address] ?? 0) + (vout.value ?? 0);
+                  fundedCount[address] = (fundedCount[address] ?? 0) + 1;
+                }
+              }
+              for (const address of Object.keys({ ...funded, ...spent })) {
+                // add tx to summary
+                const txSummary: AddressTxSummary = {
+                  txid: tx.txid,
+                  value: (funded[address] ?? 0) - (spent[address] ?? 0),
+                  height: tx.status.block_height,
+                  time: tx.status.block_time,
+                };
+                wallet[address].transactions?.push(txSummary);
+                newSummaries.push(txSummary);
+              }
+            }
+            return this.deduplicateWalletTransactions([...summaries, ...newSummaries]);
+          }, this.deduplicateWalletTransactions(Object.values(wallet).flatMap(address => address.transactions)))
+        )),
+        share(),
+      );
+    }
+  }
+
+  deduplicateWalletTransactions(walletTransactions: AddressTxSummary[]): AddressTxSummary[] {
+    const transactions = new Map<string, AddressTxSummary>();
+    for (const tx of walletTransactions) {
+      if (transactions.has(tx.txid)) {
+        transactions.get(tx.txid).value += tx.value;
+      } else {
+        transactions.set(tx.txid, tx);
+      }
+    }
+    return Array.from(transactions.values()).sort((a, b) => {
+      if (a.height === b.height) {
+        return b.tx_position - a.tx_position;
+      }
+      return b.height - a.height;
+    });
+  }
+
  @HostListener('window:resize', ['$event'])
  onResize(): void {
    if (window.innerWidth >= 992) {
--- a/frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.components.ts
+++ b/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 '../../services/api.service';
+import { ApiService } from '@app/services/api.service';
 import { formatNumber } from '@angular/common';
-import { selectPowerOfTen } from '../../bitcoin.utils';
-import { StateService } from '../../services/state.service';
+import { selectPowerOfTen } from '@app/bitcoin.utils';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-difficulty-adjustments-table',
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { StateService } from '../../services/state.service';
+import { StateService } from '@app/services/state.service';

 interface EpochProgress {
  base: string;
--- a/frontend/src/app/components/difficulty/difficulty.component.ts
+++ b/frontend/src/app/components/difficulty/difficulty.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, ElementRef, ViewChild, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { StateService } from '../..//services/state.service';
+import { StateService } from '@app/services/state.service';

 interface EpochProgress {
  base: string;
@@ -247,4 +247,4 @@ function getNextBlockSubsidy(height: number): number {
  // Subsidy is cut in half every 210,000 blocks which will occur approximately every 4 years.
  subsidy >>= BigInt(halvings);
  return Number(subsidy);
-}
+}
--- a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
+++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
@@ -2,15 +2,15 @@ import { Component, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/
 import { ActivatedRoute, Router } from '@angular/router';
 import { catchError, startWith } from 'rxjs/operators';
 import { Subject, Subscription, of } from 'rxjs';
-import { StateService } from '../../services/state.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 '../block-overview-graph/block-overview-graph.component';
-import { detectWebGL } from '../../shared/graphs.utils';
+import { StateService } from '@app/services/state.service';
+import { WebsocketService } from '@app/services/websocket.service';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { BlockExtended, TransactionStripped } from '@interfaces/node-api.interface';
+import { ApiService } from '@app/services/api.service';
+import { BlockOverviewGraphComponent } from '@components/block-overview-graph/block-overview-graph.component';
+import { detectWebGL } from '@app/shared/graphs.utils';
 import { animate, style, transition, trigger } from '@angular/animations';
-import { BytesPipe } from '../../shared/pipes/bytes-pipe/bytes.pipe';
+import { BytesPipe } from '@app/shared/pipes/bytes-pipe/bytes.pipe';

 function bestFitResolution(min, max, n): number {
  const target = (min + max) / 2;
--- a/frontend/src/app/components/faucet/faucet.component.ts
+++ b/frontend/src/app/components/faucet/faucet.component.ts
@@ -1,12 +1,12 @@
-import { Component, OnDestroy, OnInit, ChangeDetectorRef } from "@angular/core";
-import { FormBuilder, FormGroup, Validators, ValidatorFn, AbstractControl, ValidationErrors } from "@angular/forms";
-import { Subscription } from "rxjs";
-import { ServicesApiServices } from "../../services/services-api.service";
-import { getRegex } from "../../shared/regex.utils";
-import { StateService } from "../../services/state.service";
-import { WebsocketService } from "../../services/websocket.service";
-import { AudioService } from "../../services/audio.service";
-import { HttpErrorResponse } from "@angular/common/http";
+import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { ServicesApiServices } from '@app/services/services-api.service';
+import { getRegex } from '@app/shared/regex.utils';
+import { StateService } from '@app/services/state.service';
+import { WebsocketService } from '@app/services/websocket.service';
+import { AudioService } from '@app/services/audio.service';
+import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-faucet',
--- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
@@ -1,9 +1,9 @@
 import { HostListener, OnChanges, OnDestroy } from '@angular/core';
 import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { TransactionStripped } from '../../interfaces/node-api.interface';
-import { StateService } from '../../services/state.service';
-import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe';
-import { selectPowerOfTen } from '../../bitcoin.utils';
+import { TransactionStripped } from '@interfaces/node-api.interface';
+import { StateService } from '@app/services/state.service';
+import { VbytesPipe } from '@app/shared/pipes/bytes-pipe/vbytes.pipe';
+import { selectPowerOfTen } from '@app/bitcoin.utils';
 import { Subscription } from 'rxjs';

@Component({
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@@ -1,10 +1,10 @@
 import { Component, OnInit, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { StateService } from '../../services/state.service';
+import { StateService } from '@app/services/state.service';
 import { Observable, combineLatest, Subscription } from 'rxjs';
-import { Recommendedfees } from '../../interfaces/websocket.interface';
-import { feeLevels } from '../../app.constants';
+import { Recommendedfees } from '@interfaces/websocket.interface';
+import { feeLevels } from '@app/app.constants';
 import { map, startWith, tap } from 'rxjs/operators';
-import { ThemeService } from '../../services/theme.service';
+import { ThemeService } from '@app/services/theme.service';

@Component({
  selector: 'app-fees-box',
--- a/frontend/src/app/components/fiat-selector/fiat-selector.component.ts
+++ b/frontend/src/app/components/fiat-selector/fiat-selector.component.ts
@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { StorageService } from '../../services/storage.service';
-import { fiatCurrencies } from '../../app.constants';
-import { StateService } from '../../services/state.service';
+import { StorageService } from '@app/services/storage.service';
+import { fiatCurrencies } from '@app/app.constants';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-fiat-selector',
--- a/frontend/src/app/components/footer/footer.component.ts
+++ b/frontend/src/app/components/footer/footer.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
-import { StateService } from '../../services/state.service';
+import { StateService } from '@app/services/state.service';
 import { Observable, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { MempoolInfo } from '../../interfaces/websocket.interface';
+import { MempoolInfo } from '@interfaces/websocket.interface';

 interface MempoolBlocksData {
  blocks: number;
--- a/frontend/src/app/components/graphs/graphs.component.ts
+++ b/frontend/src/app/components/graphs/graphs.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { StateService } from '../../services/state.service';
-import { WebsocketService } from '../../services/websocket.service';
+import { StateService } from '@app/services/state.service';
+import { WebsocketService } from '@app/services/websocket.service';
+import { Router, ActivatedRoute } from '@angular/router';
+import { handleDemoRedirect } from '../../shared/common.utils';

@Component({
  selector: 'app-graphs',
@@ -13,7 +15,9 @@ export class GraphsComponent implements OnInit {

  constructor(
    public stateService: StateService,
-    private websocketService: WebsocketService
+    private websocketService: WebsocketService,
+    private router: Router,
+    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
@@ -22,5 +26,7 @@ export class GraphsComponent implements OnInit {
    if (this.stateService.env.ACCELERATOR === true && (this.stateService.env.MINING_DASHBOARD === true || this.stateService.env.LIGHTNING === true)) {
      this.flexWrap = true;
    }
+
+    handleDemoRedirect(this.route, this.router);
  }
 }
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
-import { echarts, EChartsOption } from '../../graphs/echarts';
+import { echarts, EChartsOption } from '@app/graphs/echarts';
 import { combineLatest, fromEvent, merge, Observable, of } from 'rxjs';
 import { map, mergeMap, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../services/api.service';
-import { SeoService } from '../../services/seo.service';
+import { ApiService } from '@app/services/api.service';
+import { SeoService } from '@app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { selectPowerOfTen } from '../../bitcoin.utils';
-import { StorageService } from '../../services/storage.service';
-import { MiningService } from '../../services/mining.service';
-import { download } from '../../shared/graphs.utils';
+import { selectPowerOfTen } from '@app/bitcoin.utils';
+import { StorageService } from '@app/services/storage.service';
+import { MiningService } from '@app/services/mining.service';
+import { download } from '@app/shared/graphs.utils';
 import { ActivatedRoute } from '@angular/router';
-import { StateService } from '../../services/state.service';
-import { seoDescriptionNetwork } from '../../shared/common.utils';
+import { StateService } from '@app/services/state.service';
+import { seoDescriptionNetwork } from '@app/shared/common.utils';

@Component({
  selector: 'app-hashrate-chart',
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
@@ -1,16 +1,16 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
-import { EChartsOption } from '../../graphs/echarts';
+import { EChartsOption } from '@app/graphs/echarts';
 import { Observable } from 'rxjs';
 import { delay, map, retryWhen, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../services/api.service';
-import { SeoService } from '../../services/seo.service';
+import { ApiService } from '@app/services/api.service';
+import { SeoService } from '@app/services/seo.service';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { chartColors, poolsColor } from '../../app.constants';
-import { StorageService } from '../../services/storage.service';
-import { MiningService } from '../../services/mining.service';
-import { download } from '../../shared/graphs.utils';
+import { chartColors, poolsColor } from '@app/app.constants';
+import { StorageService } from '@app/services/storage.service';
+import { MiningService } from '@app/services/mining.service';
+import { download } from '@app/shared/graphs.utils';
 import { ActivatedRoute } from '@angular/router';
-import { StateService } from '../../services/state.service';
+import { StateService } from '@app/services/state.service';

 interface Hashrate {
  timestamp: number;
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@@ -1,10 +1,10 @@
 import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
-import { EChartsOption } from '../../graphs/echarts';
+import { EChartsOption } from '@app/graphs/echarts';
 import { OnChanges } from '@angular/core';
-import { StorageService } from '../../services/storage.service';
-import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/graphs.utils';
+import { StorageService } from '@app/services/storage.service';
+import { download, formatterXAxis, formatterXAxisLabel } from '@app/shared/graphs.utils';
 import { formatNumber } from '@angular/common';
-import { StateService } from '../../services/state.service';
+import { StateService } from '@app/services/state.service';
 import { Subscription } from 'rxjs';

 const OUTLIERS_MEDIAN_MULTIPLIER = 4;
--- a/frontend/src/app/components/language-selector/language-selector.component.ts
+++ b/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 { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { languages } from '../../app.constants';
-import { LanguageService } from '../../services/language.service';
+import { languages } from '@app/app.constants';
+import { LanguageService } from '@app/services/language.service';

@Component({
  selector: 'app-language-selector',
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -1,7 +1,7 @@
 import { Component, Inject, LOCALE_ID, ChangeDetectionStrategy, Input, OnChanges, OnInit } from '@angular/core';
 import { formatDate, formatNumber } from '@angular/common';
-import { EChartsOption } from '../../graphs/echarts';
-import { StateService } from '../../services/state.service';
+import { EChartsOption } from '@app/graphs/echarts';
+import { StateService } from '@app/services/state.service';

@Component({
  selector: 'app-lbtc-pegs-graph',
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { Env, StateService } from '../../services/state.service';
+import { Env, StateService } from '@app/services/state.service';
 import { merge, Observable, of} from 'rxjs';
-import { LanguageService } from '../../services/language.service';
-import { EnterpriseService } from '../../services/enterprise.service';
-import { NavigationService } from '../../services/navigation.service';
+import { LanguageService } from '@app/services/language.service';
+import { EnterpriseService } from '@app/services/enterprise.service';
+import { NavigationService } from '@app/services/navigation.service';

@Component({
  selector: 'app-liquid-master-page',
--- a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { Observable, map, of } from 'rxjs';
-import { FederationUtxo } from '../../../interfaces/node-api.interface';
+import { FederationUtxo } from '@interfaces/node-api.interface';

@Component({
  selector: 'app-expired-utxos-stats',
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
@@ -1,10 +1,10 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
 import { Observable, Subject, combineLatest, of, timer } from 'rxjs';
 import { delayWhen, filter, map, share, shareReplay, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
-import { ApiService } from '../../../services/api.service';
-import { Env, StateService } from '../../../services/state.service';
-import { AuditStatus, CurrentPegs, FederationAddress } from '../../../interfaces/node-api.interface';
-import { WebsocketService } from '../../../services/websocket.service';
+import { ApiService } from '@app/services/api.service';
+import { Env, StateService } from '@app/services/state.service';
+import { AuditStatus, CurrentPegs, FederationAddress } from '@interfaces/node-api.interface';
+import { WebsocketService } from '@app/services/websocket.service';

@Component({
  selector: 'app-federation-addresses-list',
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -56,8 +56,7 @@
              </ng-template>
            </td>
            <td class="timestamp text-left">
-              &lrm;{{ utxo.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
-              <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="utxo.blocktime"></app-time>)</i></div>
+              <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm'" [unixTime]="utxo.blocktime"></app-timestamp>
            </td>
            <td class="expires-in text-left" [ngStyle]="{ 'color': getGradientColor(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) }">
              {{ utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate < 0 ? -(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) : utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate }} <span i18n="shared.blocks" class="symbol">blocks</span>
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
@@ -2,10 +2,10 @@ import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, Observable, Subject, combineLatest, of, timer } from 'rxjs';
 import { delayWhen, filter, map, share, shareReplay, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
-import { ApiService } from '../../../services/api.service';
-import { Env, StateService } from '../../../services/state.service';
-import { AuditStatus, CurrentPegs, FederationUtxo } from '../../../interfaces/node-api.interface';
-import { WebsocketService } from '../../../services/websocket.service';
+import { ApiService } from '@app/services/api.service';
+import { Env, StateService } from '@app/services/state.service';
+import { AuditStatus, CurrentPegs, FederationUtxo } from '@interfaces/node-api.interface';
+import { WebsocketService } from '@app/services/websocket.service';

@Component({
  selector: 'app-federation-utxos-list',
--- a/Show More
+++ b/Show More