Default frontend network setting

frontend/mempool-frontend-config.sample.json

@@ -4,6 +4,7 @@
   "SIGNET_ENABLED": false,
   "LIQUID_ENABLED": false,
   "LIQUID_TESTNET_ENABLED": false,
+  "MAINNET_ENABLED": true,
   "ITEMS_PER_PAGE": 10,
   "KEEP_BLOCKS_AMOUNT": 8,
   "NGINX_PROTOCOL": "http",
@@ -12,6 +13,7 @@
   "BLOCK_WEIGHT_UNITS": 4000000,
   "MEMPOOL_BLOCKS_AMOUNT": 8,
   "BASE_MODULE": "mempool",
+  "DEFAULT_NETWORK": "",
   "MEMPOOL_WEBSITE_URL": "https://mempool.space",
   "LIQUID_WEBSITE_URL": "https://liquid.network",
   "MINING_DASHBOARD": true,

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

@@ -67,7 +67,7 @@
       <app-svg-images class="d-flex justify-content-center align-items-center current-network-svg" [name]="network.val === '' ? 'bitcoin' : network.val" width="20" height="20" viewBox="0 0 65 65"></app-svg-images>
     </button>
     <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
-      <a ngbDropdownItem class="mainnet" [routerLink]="networkPaths['mainnet'] || '/'"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>
+      <a ngbDropdownItem *ngIf="env.MAINNET_ENABLED" class="mainnet" [routerLink]="networkPaths['mainnet'] || '/'"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>
       <a ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" [routerLink]="networkPaths['signet'] || '/signet'"><app-svg-images name="signet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Signet</a>
       <a ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" [routerLink]="networkPaths['testnet'] || '/testnet'"><app-svg-images name="testnet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet3</a>
       <a ngbDropdownItem *ngIf="env.TESTNET4_ENABLED" class="testnet4" [class.active]="network.val === 'testnet4'" [routerLink]="networkPaths['testnet4'] || '/testnet4'"><app-svg-images name="testnet4" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet4 <span class="badge badge-pill badge-warning beta-network" i18n="beta">beta</span></a>

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

@@ -29,7 +29,7 @@ export class ApiService {
     }
     this.apiBasePath = ''; // assume mainnet by default
     this.stateService.networkChanged$.subscribe((network) => {
-      this.apiBasePath = network ? '/' + network : '';
+      this.apiBasePath = network && network !== this.stateService.env.DEFAULT_NETWORK ? '/' + network : '';
     });
   }
 

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

@@ -1,32 +1,31 @@
 import { Injectable } from '@angular/core';
-import { Router, ActivatedRoute, NavigationEnd, ActivatedRouteSnapshot } from '@angular/router';
+import { Router, NavigationEnd, ActivatedRouteSnapshot } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { StateService } from './state.service';
 
-const networkModules = {
-  bitcoin: {
-    subnets: [
-      { name: 'mainnet', path: '' },
-      { name: 'testnet', path: '/testnet' },
-      { name: 'testnet4', path: '/testnet4' },
-      { name: 'signet', path: '/signet' },
-    ],
-  },
-  liquid: {
-    subnets: [
-      { name: 'liquid', path: '' },
-      { name: 'liquidtestnet', path: '/testnet' },
-    ],
-  }
-};
-const networks = Object.keys(networkModules);
-
 @Injectable({
   providedIn: 'root'
 })
 export class NavigationService {
   subnetPaths = new BehaviorSubject<Record<string,string>>({});
+  networkModules = {
+    bitcoin: {
+      subnets: [
+        { name: 'mainnet', path: '' },
+        { name: 'testnet', path: this.stateService.env.DEFAULT_NETWORK === 'testnet' ? '/' : '/testnet' },
+        { name: 'testnet4', path: this.stateService.env.DEFAULT_NETWORK === 'testnet4' ? '/' : '/testnet4' },
+        { name: 'signet', path: this.stateService.env.DEFAULT_NETWORK === 'signet' ? '/' : '/signet' },
+      ],
+    },
+    liquid: {
+      subnets: [
+        { name: 'liquid', path: '' },
+        { name: 'liquidtestnet', path: '/testnet' },
+      ],
+    }
+  };
+  networks = Object.keys(this.networkModules);
 
   constructor(
     private stateService: StateService,
@@ -46,11 +45,11 @@ export class NavigationService {
     const networkPaths = {};
     let route = root;
     // traverse the router state tree until all network paths are set, or we reach the end of the tree
-    while (!networks.reduce((acc, network) => acc && !!networkPaths[network], true) && route) {
+    while (!this.networks.reduce((acc, network) => acc && !!networkPaths[network], true) && route) {
       // 'networkSpecific' paths may correspond to valid routes on other networks, but aren't directly compatible
       // (e.g. we shouldn't link a mainnet transaction page to the same txid on testnet or liquid)
       if (route.data?.networkSpecific) {
-        networks.forEach(network => {
+        this.networks.forEach(network => {
           if (networkPaths[network] == null) {
             networkPaths[network] = path;
           }
@@ -59,7 +58,7 @@ export class NavigationService {
       // null or empty networks list is shorthand for "compatible with every network"
       if (route.data?.networks?.length) {
         // if the list is non-empty, only those networks are compatible
-        networks.forEach(network => {
+        this.networks.forEach(network => {
           if (!route.data.networks.includes(network)) {
             if (networkPaths[network] == null) {
               networkPaths[network] = path;
@@ -76,7 +75,7 @@ export class NavigationService {
     }
 
     const subnetPaths = {};
-    Object.entries(networkModules).forEach(([key, network]) => {
+    Object.entries(this.networkModules).forEach(([key, network]) => {
       network.subnets.forEach(subnet => {
         subnetPaths[subnet.name] = subnet.path + (networkPaths[key] != null ? networkPaths[key] : path);
       });

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

@@ -43,6 +43,7 @@ export interface Customization {
 }
 
 export interface Env {
+  MAINNET_ENABLED: boolean;
   TESTNET_ENABLED: boolean;
   TESTNET4_ENABLED: boolean;
   SIGNET_ENABLED: boolean;
@@ -52,6 +53,7 @@ export interface Env {
   KEEP_BLOCKS_AMOUNT: number;
   OFFICIAL_MEMPOOL_SPACE: boolean;
   BASE_MODULE: string;
+  DEFAULT_NETWORK: string;
   NGINX_PROTOCOL?: string;
   NGINX_HOSTNAME?: string;
   NGINX_PORT?: string;
@@ -77,12 +79,14 @@ export interface Env {
 }
 
 const defaultEnv: Env = {
+  'MAINNET_ENABLED': true,
   'TESTNET_ENABLED': false,
   'TESTNET4_ENABLED': false,
   'SIGNET_ENABLED': false,
   'LIQUID_ENABLED': false,
   'LIQUID_TESTNET_ENABLED': false,
   'BASE_MODULE': 'mempool',
+  'DEFAULT_NETWORK': '',
   'ITEMS_PER_PAGE': 10,
   'KEEP_BLOCKS_AMOUNT': 8,
   'OFFICIAL_MEMPOOL_SPACE': false,
@@ -202,6 +206,8 @@ export class StateService {
       this.env.MINING_DASHBOARD = false;
     }
 
+    this.network = this.env.DEFAULT_NETWORK;
+
     if (this.isBrowser) {
       this.setNetworkBasedonUrl(window.location.pathname);
       this.setLightningBasedonUrl(window.location.pathname);
@@ -357,8 +363,8 @@ export class StateService {
             this.networkChanged$.next(this.env.BASE_MODULE);
           }
         } else if (this.network !== '') {
-          this.network = '';
+          this.network = this.env.DEFAULT_NETWORK;
-          this.networkChanged$.next('');
+          this.networkChanged$.next(this.env.DEFAULT_NETWORK);
         }
     }
   }

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

@@ -55,7 +55,7 @@ export class WebsocketService {
         .pipe(take(1))
         .subscribe((response) => this.handleResponse(response));
     } else {
-      this.network = this.stateService.network;
+      this.network = this.stateService.network === this.stateService.env.DEFAULT_NETWORK ? '' : this.stateService.network;
       this.websocketSubject = webSocket<WebsocketResponse>(this.webSocketUrl.replace('{network}', this.network ? '/' + this.network : ''));
 
       const { response: theInitData } = this.transferState.get<any>(initData, null) || {};
@@ -75,7 +75,7 @@ export class WebsocketService {
         if (network === this.network) {
           return;
         }
-        this.network = network;
+        this.network = network === this.stateService.env.DEFAULT_NETWORK ? '' : network;
         clearTimeout(this.onlineCheckTimeout);
         clearTimeout(this.onlineCheckTimeoutTwo);
 

frontend/src/app/shared/pipes/relative-url/relative-url.pipe.ts

@@ -12,7 +12,9 @@ export class RelativeUrlPipe implements PipeTransform {
 
   transform(value: string, swapNetwork?: string): string {
     let network = swapNetwork || this.stateService.network;
-    if (network === 'mainnet') network = '';
+    if (network === 'mainnet' || network === this.stateService.env.DEFAULT_NETWORK) { 
+      network = '';
+    }
     if (this.stateService.env.BASE_MODULE === 'liquid' && network === 'liquidtestnet') {
       network = 'testnet';
     } else if (this.stateService.env.BASE_MODULE !== 'mempool') {