Split master page components & deduplicate main routes

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

@@ -6,19 +6,14 @@ import { BlockViewComponent } from './components/block-view/block-view.component
 import { MempoolBlockViewComponent } from './components/mempool-block-view/mempool-block-view.component';
 import { ClockComponent } from './components/clock/clock.component';
 import { AddressComponent } from './components/address/address.component';
-import { MasterPageComponent } from './components/master-page/master-page.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
-import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
 import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
 import { BlocksList } from './components/blocks-list/blocks-list.component';
-import { RbfList } from './components/rbf-list/rbf-list.component';
-import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';
 import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component';
 import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component';
 import { AssetsComponent } from './components/assets/assets.component';
 import { AssetComponent } from './components/asset/asset.component';
 import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
-import { CalculatorComponent } from './components/calculator/calculator.component';
 
 const browserWindow = window || {};
 // @ts-ignore
@@ -36,77 +31,8 @@ let routes: Routes = [
       },
       {
         path: '',
-        component: MasterPageComponent,
+        loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
-        children: [
+        data: { preload: true },
-          {
-            path: 'mining/blocks',
-            redirectTo: 'blocks',
-            pathMatch: 'full'
-          },
-          {
-            path: 'tx/push',
-            component: PushTransactionComponent,
-          },
-          {
-            path: 'about',
-            loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
-          },
-          {
-            path: 'blocks',
-            component: BlocksList,
-          },
-          {
-            path: 'rbf',
-            component: RbfList,
-          },
-          {
-            path: 'terms-of-service',
-            loadChildren: () => import('./components/terms-of-service/terms-of-service.module').then(m => m.TermsOfServiceModule),
-          },
-          {
-            path: 'privacy-policy',
-            loadChildren: () => import('./components/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyModule),
-          },
-          {
-            path: 'trademark-policy',
-            loadChildren: () => import('./components/trademark-policy/trademark-policy.module').then(m => m.TrademarkModule),
-          },
-          {
-            path: 'address/:id',
-            children: [],
-            component: AddressComponent,
-            data: {
-              ogImage: true,
-              networkSpecific: true,
-            }
-          },
-          {
-            path: 'tx',
-            component: StartComponent,
-            data: { preload: true, networkSpecific: true },
-            loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
-          },
-          {
-            path: 'block',
-            component: StartComponent,
-            data: { preload: true, networkSpecific: true },
-            loadChildren: () => import('./components/block/block.module').then(m => m.BlockModule),
-          },
-          {
-            path: 'docs',
-            loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule),
-            data: { preload: true },
-          },
-          {
-            path: 'api',
-            loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
-          },
-          {
-            path: 'lightning',
-            loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule),
-            data: { preload: browserWindowEnv && browserWindowEnv.LIGHTNING === true, networks: ['bitcoin'] },
-          },
-        ],
       },
       {
         path: 'status',
@@ -138,71 +64,8 @@ let routes: Routes = [
       },
       {
         path: '',
-        component: MasterPageComponent,
+        loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
-        children: [
+        data: { preload: true },
-          {
-            path: 'tx/push',
-            component: PushTransactionComponent,
-          },
-          {
-            path: 'about',
-            loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
-          },
-          {
-            path: 'blocks',
-            component: BlocksList,
-          },
-          {
-            path: 'rbf',
-            component: RbfList,
-          },
-          {
-            path: 'terms-of-service',
-            loadChildren: () => import('./components/terms-of-service/terms-of-service.module').then(m => m.TermsOfServiceModule),
-          },
-          {
-            path: 'privacy-policy',
-            loadChildren: () => import('./components/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyModule),
-          },
-          {
-            path: 'trademark-policy',
-            loadChildren: () => import('./components/trademark-policy/trademark-policy.module').then(m => m.TrademarkModule),
-          },
-          {
-            path: 'address/:id',
-            children: [],
-            component: AddressComponent,
-            data: {
-              ogImage: true,
-              networkSpecific: true,
-            }
-          },
-          {
-            path: 'tx',
-            component: StartComponent,
-            data: { preload: true, networkSpecific: true },
-            loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
-          },
-          {
-            path: 'block',
-            component: StartComponent,
-            data: { preload: true, networkSpecific: true },
-            loadChildren: () => import('./components/block/block.module').then(m => m.BlockModule),
-          },
-          {
-            path: 'docs',
-            loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
-          },
-          {
-            path: 'api',
-            loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
-          },
-          {
-            path: 'lightning',
-            data: { networks: ['bitcoin'] },
-            loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule)
-          },
-        ],
       },
       {
         path: 'status',
@@ -226,80 +89,8 @@ let routes: Routes = [
   },
   {
     path: '',
-    component: MasterPageComponent,
+    loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
-    children: [
+    data: { preload: true },
-      {
-        path: 'mining/blocks',
-        redirectTo: 'blocks',
-        pathMatch: 'full'
-      },
-      {
-        path: 'tx/push',
-        component: PushTransactionComponent,
-      },
-      {
-        path: 'about',
-        loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
-      },
-      {
-        path: 'blocks',
-        component: BlocksList,
-      },
-      {
-        path: 'rbf',
-        component: RbfList,
-      },
-      {
-        path: 'tools/calculator',
-        component: CalculatorComponent
-      },
-      {
-        path: 'terms-of-service',
-        loadChildren: () => import('./components/terms-of-service/terms-of-service.module').then(m => m.TermsOfServiceModule),
-      },
-      {
-        path: 'privacy-policy',
-        loadChildren: () => import('./components/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyModule),
-      },
-      {
-        path: 'trademark-policy',
-        loadChildren: () => import('./components/trademark-policy/trademark-policy.module').then(m => m.TrademarkModule),
-      },
-      {
-        path: 'address/:id',
-        children: [],
-        component: AddressComponent,
-        data: {
-          ogImage: true,
-          networkSpecific: true,
-        }
-      },
-      {
-        path: 'tx',
-        component: StartComponent,
-        data: { preload: true, networkSpecific: true },
-        loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
-      },
-      {
-        path: 'block',
-        component: StartComponent,
-        data: { preload: true, networkSpecific: true },
-        loadChildren: () => import('./components/block/block.module').then(m => m.BlockModule),
-      },
-      {
-        path: 'docs',
-        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
-      },
-      {
-        path: 'api',
-        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
-      },
-      {
-        path: 'lightning',
-        data: { networks: ['bitcoin'] },
-        loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule)
-      },
-    ],
   },
   {
     path: 'preview',
@@ -356,7 +147,6 @@ let routes: Routes = [
 if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'bisq') {
   routes = [{
     path: '',
-    component: BisqMasterPageComponent,
     loadChildren: () => import('./bisq/bisq.module').then(m => m.BisqModule)
   }];
 }
@@ -373,88 +163,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
         },
         {
           path: '',
-          component: LiquidMasterPageComponent,
+          loadChildren: () => import ('./liquid/liquid-master-page.module').then(m => m.LiquidMasterPageModule)
-          children: [
-            {
-              path: 'tx/push',
-              component: PushTransactionComponent,
-            },
-            {
-              path: 'about',
-              loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
-            },
-            {
-              path: 'blocks',
-              component: BlocksList,
-            },
-            {
-              path: 'terms-of-service',
-              loadChildren: () => import('./components/terms-of-service/terms-of-service.module').then(m => m.TermsOfServiceModule),
-            },
-            {
-              path: 'privacy-policy',
-              loadChildren: () => import('./components/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyModule),
-            },
-            {
-              path: 'trademark-policy',
-              loadChildren: () => import('./components/trademark-policy/trademark-policy.module').then(m => m.TrademarkModule),
-            },
-            {
-              path: 'address/:id',
-              children: [],
-              component: AddressComponent,
-              data: {
-                ogImage: true,
-                networkSpecific: true,
-              }
-            },
-            {
-              path: 'tx',
-              component: StartComponent,
-              data: { preload: true, networkSpecific: true },
-              loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
-            },
-            {
-              path: 'block',
-              component: StartComponent,
-              data: { preload: true, networkSpecific: true },
-              loadChildren: () => import('./components/block/block.module').then(m => m.BlockModule),
-            },
-            {
-              path: 'assets',
-              data: { networks: ['liquid'] },
-              component: AssetsNavComponent,
-              children: [
-                {
-                  path: 'all',
-                  data: { networks: ['liquid'] },
-                  component: AssetsComponent,
-                },
-                {
-                  path: 'asset/:id',
-                  data: { networkSpecific: true },
-                  component: AssetComponent
-                },
-                {
-                  path: 'group/:id',
-                  data: { networkSpecific: true },
-                  component: AssetGroupComponent
-                },
-                {
-                  path: '**',
-                  redirectTo: 'all'
-                }
-              ]
-            },
-            {
-              path: 'docs',
-              loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
-            },
-            {
-              path: 'api',
-              loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
-            },
-          ],
         },
         {
           path: 'status',
@@ -478,93 +187,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
     },
     {
       path: '',
-      component: LiquidMasterPageComponent,
+      loadChildren: () => import ('./liquid/liquid-master-page.module').then(m => m.LiquidMasterPageModule)
-      children: [
-        {
-          path: 'tx/push',
-          component: PushTransactionComponent,
-        },
-        {
-          path: 'about',
-          loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
-        },
-        {
-          path: 'blocks',
-          component: BlocksList,
-        },
-        {
-          path: 'terms-of-service',
-          loadChildren: () => import('./components/terms-of-service/terms-of-service.module').then(m => m.TermsOfServiceModule),
-        },
-        {
-          path: 'privacy-policy',
-          loadChildren: () => import('./components/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyModule),
-        },
-        {
-          path: 'trademark-policy',
-          loadChildren: () => import('./components/trademark-policy/trademark-policy.module').then(m => m.TrademarkModule),
-        },
-        {
-          path: 'address/:id',
-          children: [],
-          component: AddressComponent,
-          data: {
-            ogImage: true,
-            networkSpecific: true,
-          }
-        },
-        {
-          path: 'tx',
-          component: StartComponent,
-          data: { preload: true, networkSpecific: true },
-          loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
-        },
-        {
-          path: 'block',
-          component: StartComponent,
-          data: { preload: true, networkSpecific: true },
-          loadChildren: () => import('./components/block/block.module').then(m => m.BlockModule),
-        },
-        {
-          path: 'assets',
-          data: { networks: ['liquid'] },
-          component: AssetsNavComponent,
-          children: [
-            {
-              path: 'featured',
-              data: { networkSpecific: true },
-              component: AssetsFeaturedComponent,
-            },
-            {
-              path: 'all',
-              data: { networks: ['liquid'] },
-              component: AssetsComponent,
-            },
-            {
-              path: 'asset/:id',
-              data: { networkSpecific: true },
-              component: AssetComponent
-            },
-            {
-              path: 'group/:id',
-              data: { networkSpecific: true },
-              component: AssetGroupComponent
-            },
-            {
-              path: '**',
-              redirectTo: 'featured'
-            }
-          ]
-        },
-        {
-          path: 'docs',
-          loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
-        },
-        {
-          path: 'api',
-          loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
-        },
-      ],
     },
     {
       path: 'preview',

frontend/src/app/bisq/bisq.module.ts

@@ -27,9 +27,11 @@ import { AutofocusDirective } from '../components/ngx-bootstrap-multiselect/auto
 import { MultiSelectSearchFilter } from '../components/ngx-bootstrap-multiselect/search-filter.pipe';
 import { OffClickDirective } from '../components/ngx-bootstrap-multiselect/off-click.directive';
 import { NgxDropdownMultiselectComponent } from '../components/ngx-bootstrap-multiselect/ngx-bootstrap-multiselect.component';
+import { BisqMasterPageComponent } from '../components/bisq-master-page/bisq-master-page.component';
 
 @NgModule({
   declarations: [
+    BisqMasterPageComponent,
     BisqTransactionsComponent,
     BisqTransactionComponent,
     BisqBlockComponent,

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { BisqMasterPageComponent } from '../components/bisq-master-page/bisq-master-page.component';
 import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
 import { BisqTransactionComponent } from './bisq-transaction/bisq-transaction.component';
 import { BisqBlockComponent } from './bisq-block/bisq-block.component';
@@ -12,74 +13,80 @@ import { BisqMainDashboardComponent } from './bisq-main-dashboard/bisq-main-dash
 import { PushTransactionComponent } from '../components/push-transaction/push-transaction.component';
 
 const routes: Routes = [
-    {
+  {
-      path: '',
+    path: '',
-      component: BisqMainDashboardComponent,
+    component: BisqMasterPageComponent,
-    },
+    children: [
-    {
+      {
-      path: 'markets',
+        path: '',
-      data: { networks: ['bisq'] },
+        component: BisqMainDashboardComponent,
-      component: BisqDashboardComponent,
+      },
-    },
+      {
-    {
+        path: 'markets',
-      path: 'transactions',
+        data: { networks: ['bisq'] },
-      data: { networks: ['bisq'] },
+        component: BisqDashboardComponent,
-      component: BisqTransactionsComponent
+      },
-    },
+      {
-    {
+        path: 'transactions',
-      path: 'market/:pair',
+        data: { networks: ['bisq'] },
-      data: { networkSpecific: true },
+        component: BisqTransactionsComponent
-      component: BisqMarketComponent,
+      },
-    },
+      {
-    {
+        path: 'market/:pair',
-      path: 'tx/push',
+        data: { networkSpecific: true },
-      component: PushTransactionComponent,
+        component: BisqMarketComponent,
-    },
+      },
-    {
+      {
-      path: 'tx/:id',
+        path: 'tx/push',
-      data: { networkSpecific: true },
+        component: PushTransactionComponent,
-      component: BisqTransactionComponent
+      },
-    },
+      {
-    {
+        path: 'tx/:id',
-      path: 'blocks',
+        data: { networkSpecific: true },
-      children: [],
+        component: BisqTransactionComponent
-      component: BisqBlocksComponent
+      },
-    },
+      {
-    {
+        path: 'blocks',
-      path: 'block/:id',
+        children: [],
-      data: { networkSpecific: true },
+        component: BisqBlocksComponent
-      component: BisqBlockComponent,
+      },
-    },
+      {
-    {
+        path: 'block/:id',
-      path: 'address/:id',
+        data: { networkSpecific: true },
-      data: { networkSpecific: true },
+        component: BisqBlockComponent,
-      component: BisqAddressComponent,
+      },
-    },
+      {
-    {
+        path: 'address/:id',
-      path: 'stats',
+        data: { networkSpecific: true },
-      data: { networks: ['bisq'] },
+        component: BisqAddressComponent,
-      component: BisqStatsComponent,
+      },
-    },
+      {
-    {
+        path: 'stats',
-      path: 'about',
+        data: { networks: ['bisq'] },
-      loadChildren: () => import('../components/about/about.module').then(m => m.AboutModule),
+        component: BisqStatsComponent,
-    },
+      },
-    {
+      {
-      path: 'docs',
+        path: 'about',
-      loadChildren: () => import('../docs/docs.module').then(m => m.DocsModule)
+        loadChildren: () => import('../components/about/about.module').then(m => m.AboutModule),
-    },
+      },
-    {
+      {
-      path: 'api',
+        path: 'docs',
-      loadChildren: () => import('../docs/docs.module').then(m => m.DocsModule)
+        loadChildren: () => import('../docs/docs.module').then(m => m.DocsModule)
-    },
+      },
-    {
+      {
-      path: 'terms-of-service',
+        path: 'api',
-      loadChildren: () => import('../components/terms-of-service/terms-of-service.module').then(m => m.TermsOfServiceModule),
+        loadChildren: () => import('../docs/docs.module').then(m => m.DocsModule)
-    },
+      },
-    {
+      {
-      path: '**',
+        path: 'terms-of-service',
-      redirectTo: ''
+        loadChildren: () => import('../components/terms-of-service/terms-of-service.module').then(m => m.TermsOfServiceModule),
-    }
+      },
+      {
+        path: '**',
+        redirectTo: ''
+      }
+    ]
+  }
 ];
 
 @NgModule({

frontend/src/app/liquid/liquid-master-page.module.ts

@@ -0,0 +1,124 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { SharedModule } from '../shared/shared.module';
+import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
+
+import { StartComponent } from '../components/start/start.component';
+import { AddressComponent } from '../components/address/address.component';
+import { PushTransactionComponent } from '../components/push-transaction/push-transaction.component';
+import { BlocksList } from '../components/blocks-list/blocks-list.component';
+import { AssetGroupComponent } from '../components/assets/asset-group/asset-group.component';
+import { AssetsComponent } from '../components/assets/assets.component';
+import { AssetComponent } from '../components/asset/asset.component';
+import { AssetsNavComponent } from '../components/assets/assets-nav/assets-nav.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LiquidMasterPageComponent,
+    children: [
+      {
+        path: 'tx/push',
+        component: PushTransactionComponent,
+      },
+      {
+        path: 'about',
+        loadChildren: () => import('../components/about/about.module').then(m => m.AboutModule),
+      },
+      {
+        path: 'blocks',
+        component: BlocksList,
+      },
+      {
+        path: 'terms-of-service',
+        loadChildren: () => import('../components/terms-of-service/terms-of-service.module').then(m => m.TermsOfServiceModule),
+      },
+      {
+        path: 'privacy-policy',
+        loadChildren: () => import('../components/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyModule),
+      },
+      {
+        path: 'trademark-policy',
+        loadChildren: () => import('../components/trademark-policy/trademark-policy.module').then(m => m.TrademarkModule),
+      },
+      {
+        path: 'address/:id',
+        children: [],
+        component: AddressComponent,
+        data: {
+          ogImage: true,
+          networkSpecific: true,
+        }
+      },
+      {
+        path: 'tx',
+        component: StartComponent,
+        data: { preload: true, networkSpecific: true },
+        loadChildren: () => import('../components/transaction/transaction.module').then(m => m.TransactionModule),
+      },
+      {
+        path: 'block',
+        component: StartComponent,
+        data: { preload: true, networkSpecific: true },
+        loadChildren: () => import('../components/block/block.module').then(m => m.BlockModule),
+      },
+      {
+        path: 'assets',
+        data: { networks: ['liquid'] },
+        component: AssetsNavComponent,
+        children: [
+          {
+            path: 'all',
+            data: { networks: ['liquid'] },
+            component: AssetsComponent,
+          },
+          {
+            path: 'asset/:id',
+            data: { networkSpecific: true },
+            component: AssetComponent
+          },
+          {
+            path: 'group/:id',
+            data: { networkSpecific: true },
+            component: AssetGroupComponent
+          },
+          {
+            path: '**',
+            redirectTo: 'all'
+          }
+        ]
+      },
+      {
+        path: 'docs',
+        loadChildren: () => import('../docs/docs.module').then(m => m.DocsModule)
+      },
+      {
+        path: 'api',
+        loadChildren: () => import('../docs/docs.module').then(m => m.DocsModule)
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class LiquidRoutingModule { }
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LiquidRoutingModule,
+    SharedModule,
+  ],
+  declarations: [
+    LiquidMasterPageComponent,
+  ]
+})
+export class LiquidMasterPageModule { }

frontend/src/app/master-page.module.ts

@@ -0,0 +1,119 @@
+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 { SharedModule } from './shared/shared.module';
+
+import { StartComponent } from './components/start/start.component';
+import { AddressComponent } from './components/address/address.component';
+import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
+import { BlocksList } from './components/blocks-list/blocks-list.component';
+import { RbfList } from './components/rbf-list/rbf-list.component';
+
+const browserWindow = window || {};
+// @ts-ignore
+const browserWindowEnv = browserWindow.__env || {};
+
+const routes: Routes = [
+  {
+    component: MasterPageComponent,
+    children: [
+      {
+        path: 'mining/blocks',
+        redirectTo: 'blocks',
+        pathMatch: 'full'
+      },
+      {
+        path: 'tx/push',
+        component: PushTransactionComponent,
+      },
+      {
+        path: 'about',
+        loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
+      },
+      {
+        path: 'blocks',
+        component: BlocksList,
+      },
+      {
+        path: 'rbf',
+        component: RbfList,
+      },
+      {
+        path: 'terms-of-service',
+        loadChildren: () => import('./components/terms-of-service/terms-of-service.module').then(m => m.TermsOfServiceModule),
+      },
+      {
+        path: 'privacy-policy',
+        loadChildren: () => import('./components/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyModule),
+      },
+      {
+        path: 'trademark-policy',
+        loadChildren: () => import('./components/trademark-policy/trademark-policy.module').then(m => m.TrademarkModule),
+      },
+      {
+        path: 'address/:id',
+        children: [],
+        component: AddressComponent,
+        data: {
+          ogImage: true,
+          networkSpecific: true,
+        }
+      },
+      {
+        path: 'tx',
+        component: StartComponent,
+        data: { preload: true, networkSpecific: true },
+        loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
+      },
+      {
+        path: 'block',
+        component: StartComponent,
+        data: { preload: true, networkSpecific: true },
+        loadChildren: () => import('./components/block/block.module').then(m => m.BlockModule),
+      },
+      {
+        path: 'docs',
+        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule),
+        data: { preload: true },
+      },
+      {
+        path: 'api',
+        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
+      },
+      {
+        path: 'lightning',
+        loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule),
+        data: { preload: browserWindowEnv && browserWindowEnv.LIGHTNING === true, networks: ['bitcoin'] },
+      },
+    ],
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class MasterPageRoutingModule { }
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MasterPageRoutingModule,
+    SharedModule,
+  ],
+  declarations: [
+    MasterPageComponent,
+  ]
+})
+export class MasterPageModule { }
+
+
+
+
+
+

frontend/src/app/shared/shared.module.ts

@@ -6,11 +6,8 @@ import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, fa
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
   faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { MasterPageComponent } from '../components/master-page/master-page.component';
 import { MenuComponent } from '../components/menu/menu.component';
 import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
-import { BisqMasterPageComponent } from '../components/bisq-master-page/bisq-master-page.component';
-import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
 import { VbytesPipe } from './pipes/bytes-pipe/vbytes.pipe';
 import { ShortenStringPipe } from './pipes/shorten-string-pipe/shorten-string.pipe';
 import { CeilPipe } from './pipes/math-ceil/math-ceil.pipe';
@@ -133,11 +130,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     MempoolBlocksComponent,
     BlockchainBlocksComponent,
     AmountComponent,
-    MasterPageComponent,
     MenuComponent,
     PreviewTitleComponent,
-    BisqMasterPageComponent,
-    LiquidMasterPageComponent,
     StartComponent,
     BlockOverviewGraphComponent,
     BlockOverviewTooltipComponent,
@@ -217,7 +211,6 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     AmountShortenerPipe,
   ],
   exports: [
-    MasterPageComponent,
     MenuComponent,
     RouterModule,
     ReactiveFormsModule,
@@ -297,6 +290,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     ConfirmationsComponent,
     ToggleComponent,
     GeolocationComponent,
+    TestnetAlertComponent,
     PreviewTitleComponent,
     GlobalFooterComponent,
     AcceleratePreviewComponent,