Merge branch 'master' into simon/transifex-pull-19-05

backend/src/api/bitcoin/bitcoin-api.ts

@@ -192,12 +192,9 @@ class BitcoinApi implements AbstractBitcoinApi {
     }
 
     if (addPrevout) {
-      if (transaction.confirmations) {
       esploraTransaction = await this.$calculateFeeFromInputs(esploraTransaction);
-      } else {
+    } else if (!transaction.confirmations) {
       esploraTransaction = await this.$appendMempoolFeeData(esploraTransaction);
-        esploraTransaction = await this.$calculateFeeFromInputs(esploraTransaction);
-      }
     }
 
     return esploraTransaction;

backend/src/routes.ts

@@ -645,7 +645,7 @@ class Routes {
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
       res.header('X-total-count', blockCount.toString());
-      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
       res.json(blockFees);
     } catch (e) {
       res.status(500).send(e instanceof Error ? e.message : e);
@@ -659,7 +659,7 @@ class Routes {
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
       res.header('X-total-count', blockCount.toString());
-      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
       res.json(blockRewards);
     } catch (e) {
       res.status(500).send(e instanceof Error ? e.message : e);
@@ -672,7 +672,7 @@ class Routes {
       const oldestIndexedBlockTimestamp = await BlocksRepository.$oldestBlockTimestamp();
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
-      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
       res.json({
         oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
         blockFeeRates: blockFeeRates,
@@ -690,7 +690,7 @@ class Routes {
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
       res.header('X-total-count', blockCount.toString());
-      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
       res.json({
         sizes: blockSizes,
         weights: blockWeights

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

@@ -1,43 +1,36 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
 import { StartComponent } from './components/start/start.component';
 import { TransactionComponent } from './components/transaction/transaction.component';
 import { BlockComponent } from './components/block/block.component';
 import { AddressComponent } from './components/address/address.component';
 import { MasterPageComponent } from './components/master-page/master-page.component';
 import { AboutComponent } from './components/about/about.component';
-import { TelevisionComponent } from './components/television/television.component';
-import { StatisticsComponent } from './components/statistics/statistics.component';
-import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
-import { AssetComponent } from './components/asset/asset.component';
-import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
 import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
 import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
 import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
 import { SponsorComponent } from './components/sponsor/sponsor.component';
-import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';
 import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
-import { PoolRankingComponent } from './components/pool-ranking/pool-ranking.component';
+import { BlocksList } from './components/blocks-list/blocks-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 { PoolComponent } from './components/pool/pool.component';
+import { AssetComponent } from './components/asset/asset.component';
-import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component';
+import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
-import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
-import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/hashrate-chart-pools.component';
-import { MiningStartComponent } from './components/mining-start/mining-start.component';
-import { GraphsComponent } from './components/graphs/graphs.component';
-import { BlocksList } from './components/blocks-list/blocks-list.component';
-import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component';
-import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component';
-import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component';
-import { BlockSizesWeightsGraphComponent } from './components/block-sizes-weights-graph/block-sizes-weights-graph.component';
 
 let routes: Routes = [
+  { 
+    path: 'testnet',
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule)
+      },
       {
         path: '',
         component: MasterPageComponent,
@@ -46,109 +39,17 @@ let routes: Routes = [
             path: 'tx/push',
             component: PushTransactionComponent,
           },
-      {
-        path: '',
-        component: StartComponent,
-        children: [
-          {
-            path: '',
-            component: DashboardComponent,
-          },
-          {
-            path: 'tx/:id',
-            component: TransactionComponent
-          },
-          {
-            path: 'block/:id',
-            component: BlockComponent
-          },
-          {
-            path: 'mempool-block/:id',
-            component: MempoolBlockComponent
-          },
-          {
-            path: 'mining',
-            component: MiningDashboardComponent,
-          },
-        ],
-      },
           {
             path: 'blocks',
             component: LatestBlocksComponent,
           },
-      {
-        path: 'mining',
-        component: MiningStartComponent,
-        children: [
-          {
-            path: 'blocks',
-            component: BlocksList,
-          },
-          {
-            path: 'pool',
-            children: [
-              {
-                path: ':slug',
-                component: PoolComponent,
-              },
-            ]
-          },
-        ]
-      },
-      {
-        path: 'graphs',
-        component: GraphsComponent,
-        children: [
-          {
-            path: '',
-            pathMatch: 'full',
-            redirectTo: 'mempool',
-          },
-          {
-            path: 'mempool',
-            component: StatisticsComponent,
-          },
-          {
-            path: 'mining/hashrate-difficulty',
-            component: HashrateChartComponent,
-          },
-          {
-            path: 'mining/pools-dominance',
-            component: HashrateChartPoolsComponent,
-          },
-          {
-            path: 'mining/pools',
-            component: PoolRankingComponent,
-          },
-          {
-            path: 'mining/block-fees',
-            component: BlockFeesGraphComponent,
-          },
-          {
-            path: 'mining/block-rewards',
-            component: BlockRewardsGraphComponent,
-          },
-          {
-            path: 'mining/block-fee-rates',
-            component: BlockFeeRatesGraphComponent,
-          },
-          {
-            path: 'mining/block-sizes-weights',
-            component: BlockSizesWeightsGraphComponent,
-          },
-        ],
-      },
           {
             path: 'about',
             component: AboutComponent,
           },
           {
-        path: 'docs',
+            path: 'mining/blocks',
-        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
+            component: BlocksList,
-      },
-      {
-        path: 'api',
-        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
           },
           {
             path: 'terms-of-service',
@@ -167,115 +68,25 @@ let routes: Routes = [
             children: [],
             component: AddressComponent
           },
-    ],
-  },
           {
-    path: 'testnet',
+            path: 'tx',
-    children: [
-      {
-        path: '',
-        component: MasterPageComponent,
-        children: [
-          {
-            path: 'tx/push',
-            component: PushTransactionComponent,
-          },
-          {
-            path: '',
             component: StartComponent,
             children: [
               {
-                path: '',
+                path: ':id',
-                component: DashboardComponent
-              },
-              {
-                path: 'tx/:id',
                 component: TransactionComponent
               },
-              {
-                path: 'block/:id',
-                component: BlockComponent
-              },
-              {
-                path: 'mempool-block/:id',
-                component: MempoolBlockComponent
-              },
-              {
-                path: 'mining',
-                component: MiningDashboardComponent,
-              },
             ],
           },
           {
-            path: 'blocks',
+            path: 'block',
-            component: LatestBlocksComponent,
+            component: StartComponent,
-          },
-          {
-            path: 'mining',
-            component: MiningStartComponent,
               children: [
               {
-                path: 'blocks',
+                path: ':id',
-                component: BlocksList,
+                component: BlockComponent
               },
-              {
+            ],
-                path: 'pool',
-                children: [
-                  {
-                    path: ':slug',
-                    component: PoolComponent,
-                  },
-                ]
-              },
-            ]
-          },
-          {
-            path: 'graphs',
-            component: GraphsComponent,
-            children: [
-              {
-                path: '',
-                pathMatch: 'full',
-                redirectTo: 'mempool',
-              },
-              {
-                path: 'mempool',
-                component: StatisticsComponent,
-              },
-              {
-                path: 'mining/hashrate-difficulty',
-                component: HashrateChartComponent,
-              },
-              {
-                path: 'mining/pools-dominance',
-                component: HashrateChartPoolsComponent,
-              },
-              {
-                path: 'mining/pools',
-                component: PoolRankingComponent,
-              },
-              {
-                path: 'mining/block-fees',
-                component: BlockFeesGraphComponent,
-              },
-              {
-                path: 'mining/block-rewards',
-                component: BlockRewardsGraphComponent,
-              },
-              {
-                path: 'mining/block-fee-rates',
-                component: BlockFeeRatesGraphComponent,
-              },
-              {
-                path: 'mining/block-sizes-weights',
-                component: BlockSizesWeightsGraphComponent,
-              },
-            ]
-          },
-          {
-            path: 'address/:id',
-            children: [],
-            component: AddressComponent
           },
           {
             path: 'docs',
@@ -287,14 +98,14 @@ let routes: Routes = [
           },
         ],
       },
-      {
-        path: 'tv',
-        component: TelevisionComponent
-      },
       {
         path: 'status',
         component: StatusViewComponent
       },
+      {
+        path: '',
+        loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule)
+      },
       {
         path: '**',
         redirectTo: '/testnet'
@@ -304,6 +115,11 @@ let routes: Routes = [
   {
     path: 'signet',
     children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule)
+      },
       {
         path: '',
         component: MasterPageComponent,
@@ -312,103 +128,55 @@ let routes: Routes = [
             path: 'tx/push',
             component: PushTransactionComponent,
           },
-          {
-            path: '',
-            component: StartComponent,
-            children: [
-              {
-                path: '',
-                component: DashboardComponent
-              },
-              {
-                path: 'tx/:id',
-                component: TransactionComponent
-              },
-              {
-                path: 'block/:id',
-                component: BlockComponent
-              },
-              {
-                path: 'mempool-block/:id',
-                component: MempoolBlockComponent
-              },
-              {
-                path: 'mining',
-                component: MiningDashboardComponent,
-              },
-            ],
-          },
           {
             path: 'blocks',
             component: LatestBlocksComponent,
           },
           {
-            path: 'mining',
+            path: 'about',
-            component: MiningStartComponent,
+            component: AboutComponent,
-            children: [
+          },
           {
-                path: 'blocks',
+            path: 'mining/blocks',
             component: BlocksList,
           },
           {
-                path: 'pool',
+            path: 'terms-of-service',
-                children: [
+            component: TermsOfServiceComponent
-                  {
-                    path: ':slug',
-                    component: PoolComponent,
-                  },
-                ]
-              },
-            ]
           },
           {
-            path: 'graphs',
+            path: 'privacy-policy',
-            component: GraphsComponent,
+            component: PrivacyPolicyComponent
-            children: [
-              {
-                path: '',
-                pathMatch: 'full',
-                redirectTo: 'mempool',
           },
           {
-                path: 'mempool',
+            path: 'trademark-policy',
-                component: StatisticsComponent,
+            component: TrademarkPolicyComponent
-              },
-              {
-                path: 'mining/hashrate-difficulty',
-                component: HashrateChartComponent,
-              },
-              {
-                path: 'mining/pools-dominance',
-                component: HashrateChartPoolsComponent,
-              },
-              {
-                path: 'mining/pools',
-                component: PoolRankingComponent,
-              },
-              {
-                path: 'mining/block-fees',
-                component: BlockFeesGraphComponent,
-              },
-              {
-                path: 'mining/block-rewards',
-                component: BlockRewardsGraphComponent,
-              },
-              {
-                path: 'mining/block-fee-rates',
-                component: BlockFeeRatesGraphComponent,
-              },
-              {
-                path: 'mining/block-sizes-weights',
-                component: BlockSizesWeightsGraphComponent,
-              },
-            ]
           },
           {
             path: 'address/:id',
             children: [],
             component: AddressComponent
           },
+          {
+            path: 'tx',
+            component: StartComponent,
+            children: [
+              {
+                path: ':id',
+                component: TransactionComponent
+              },
+            ],
+          },
+          {
+            path: 'block',
+            component: StartComponent,
+              children: [
+              {
+                path: ':id',
+                component: BlockComponent
+              },
+            ],
+          },
           {
             path: 'docs',
             loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
@@ -419,14 +187,14 @@ let routes: Routes = [
           },
         ],
       },
-      {
-        path: 'tv',
-        component: TelevisionComponent
-      },
       {
         path: 'status',
         component: StatusViewComponent
       },
+      {
+        path: '',
+        loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule)
+      },
       {
         path: '**',
         redirectTo: '/signet'
@@ -434,8 +202,76 @@ let routes: Routes = [
     ]
   },
   {
-    path: 'tv',
+    path: '',
-    component: TelevisionComponent,
+    pathMatch: 'full',
+    loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule)
+  },
+  {
+    path: '',
+    component: MasterPageComponent,
+    children: [
+      {
+        path: 'tx/push',
+        component: PushTransactionComponent,
+      },
+      {
+        path: 'blocks',
+        component: LatestBlocksComponent,
+      },
+      {
+        path: 'about',
+        component: AboutComponent,
+      },
+      {
+        path: 'mining/blocks',
+        component: BlocksList,
+      },
+      {
+        path: 'terms-of-service',
+        component: TermsOfServiceComponent
+      },
+      {
+        path: 'privacy-policy',
+        component: PrivacyPolicyComponent
+      },
+      {
+        path: 'trademark-policy',
+        component: TrademarkPolicyComponent
+      },
+      {
+        path: 'address/:id',
+        children: [],
+        component: AddressComponent
+      },
+      {
+        path: 'tx',
+        component: StartComponent,
+        children: [
+          {
+            path: ':id',
+            component: TransactionComponent
+          },
+        ],
+      },
+      {
+        path: 'block',
+        component: StartComponent,
+          children: [
+          {
+            path: ':id',
+            component: BlockComponent
+          },
+        ],
+      },
+      {
+        path: 'docs',
+        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
+      },
+      {
+        path: 'api',
+        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
+      },
+    ],
   },
   {
     path: 'status',
@@ -445,6 +281,10 @@ let routes: Routes = [
     path: 'sponsor',
     component: SponsorComponent,
   },
+  {
+    path: '',
+    loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule)
+  },
   {
     path: '**',
     redirectTo: ''
@@ -464,59 +304,180 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'bisq') {
 }
 
 if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
-  routes = [{
+  routes = [
+    {
+      path: 'testnet',
+      children: [
+        {
+          path: '',
+          pathMatch: 'full',
+          loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule)
+        },
+        {
           path: '',
           component: LiquidMasterPageComponent,
           children: [
-      {
-        path: '',
-        component: StartComponent,
-        children: [
-          {
-            path: '',
-            component: DashboardComponent
-          },
             {
               path: 'tx/push',
               component: PushTransactionComponent,
             },
-          {
-            path: 'tx/:id',
-            component: TransactionComponent
-          },
-          {
-            path: 'block/:id',
-            component: BlockComponent
-          },
-          {
-            path: 'mempool-block/:id',
-            component: MempoolBlockComponent
-          },
-        ],
-      },
             {
               path: 'blocks',
               component: LatestBlocksComponent,
             },
             {
-        path: 'graphs',
+              path: 'about',
-        component: GraphsComponent,
+              component: AboutComponent,
-        children: [
-          {
-            path: '',
-            pathMatch: 'full',
-            redirectTo: 'mempool',
             },
             {
-            path: 'mempool',
+              path: 'mining/blocks',
-            component: StatisticsComponent,
+              component: BlocksList,
+            },
+            {
+              path: 'terms-of-service',
+              component: TermsOfServiceComponent
+            },
+            {
+              path: 'privacy-policy',
+              component: PrivacyPolicyComponent
+            },
+            {
+              path: 'trademark-policy',
+              component: TrademarkPolicyComponent
+            },
+            {
+              path: 'address/:id',
+              children: [],
+              component: AddressComponent
+            },
+            {
+              path: 'tx',
+              component: StartComponent,
+              children: [
+                {
+                  path: ':id',
+                  component: TransactionComponent
+                },
+              ],
+            },
+            {
+              path: 'block',
+              component: StartComponent,
+                children: [
+                {
+                  path: ':id',
+                  component: BlockComponent
+                },
+              ],
+            },
+            {
+              path: 'assets',
+              component: AssetsNavComponent,
+              children: [
+                {
+                  path: 'all',
+                  component: AssetsComponent,
+                },
+                {
+                  path: 'asset/:id',
+                  component: AssetComponent
+                },
+                {
+                  path: 'group/:id',
+                  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',
+          component: StatusViewComponent
+        },
+        {
+          path: '',
+          loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule)
+        },
+        {
+          path: '**',
+          redirectTo: '/signet'
+        },
+      ]
+    },
+    {
+      path: '',
+      pathMatch: 'full',
+      loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule)
+    },
+    {
+      path: '',
+      component: LiquidMasterPageComponent,
+      children: [
+        {
+          path: 'tx/push',
+          component: PushTransactionComponent,
+        },
+        {
+          path: 'blocks',
+          component: LatestBlocksComponent,
+        },
+        {
+          path: 'about',
+          component: AboutComponent,
+        },
+        {
+          path: 'mining/blocks',
+          component: BlocksList,
+        },
+        {
+          path: 'terms-of-service',
+          component: TermsOfServiceComponent
+        },
+        {
+          path: 'privacy-policy',
+          component: PrivacyPolicyComponent
+        },
+        {
+          path: 'trademark-policy',
+          component: TrademarkPolicyComponent
+        },
         {
           path: 'address/:id',
+          children: [],
           component: AddressComponent
         },
+        {
+          path: 'tx',
+          component: StartComponent,
+          children: [
+            {
+              path: ':id',
+              component: TransactionComponent
+            },
+          ],
+        },
+        {
+          path: 'block',
+          component: StartComponent,
+            children: [
+            {
+              path: ':id',
+              component: BlockComponent
+            },
+          ],
+        },
         {
           path: 'assets',
           component: AssetsNavComponent,
@@ -551,157 +512,33 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
           path: 'api',
           loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
         },
-      {
-        path: 'about',
-        component: AboutComponent,
-      },
-      {
-        path: 'terms-of-service',
-        component: TermsOfServiceComponent
-      },
-      {
-        path: 'privacy-policy',
-        component: PrivacyPolicyComponent
-      },
-      {
-        path: 'trademark-policy',
-        component: TrademarkPolicyComponent
-      },
       ],
     },
-  {
-    path: 'testnet',
-    children: [
-      {
-        path: '',
-        component: LiquidMasterPageComponent,
-        children: [
-          {
-            path: '',
-            component: StartComponent,
-            children: [
-              {
-                path: '',
-                component: DashboardComponent
-              },
-              {
-                path: 'tx/push',
-                component: PushTransactionComponent,
-              },
-              {
-                path: 'tx/:id',
-                component: TransactionComponent
-              },
-              {
-                path: 'block/:id',
-                component: BlockComponent
-              },
-              {
-                path: 'mempool-block/:id',
-                component: MempoolBlockComponent
-              },
-            ],
-          },
-          {
-            path: 'blocks',
-            component: LatestBlocksComponent,
-          },
-          {
-            path: 'graphs',
-            component: GraphsComponent,
-            children: [
-              {
-                path: '',
-                pathMatch: 'full',
-                redirectTo: 'mempool',
-              },
-              {
-                path: 'mempool',
-                component: StatisticsComponent,
-              }
-            ]
-          },
-          {
-            path: 'address/:id',
-            component: AddressComponent
-          },
-          {
-            path: 'assets',
-            component: AssetsNavComponent,
-            children: [
-              {
-                path: 'all',
-                component: AssetsComponent,
-              },
-              {
-                path: 'asset/:id',
-                component: AssetComponent
-              },
-              {
-                path: 'group/:id',
-                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: 'about',
-            component: AboutComponent,
-          },
-          {
-            path: 'terms-of-service',
-            component: TermsOfServiceComponent
-          },
-          {
-            path: 'privacy-policy',
-            component: PrivacyPolicyComponent
-          },
-          {
-            path: 'trademark-policy',
-            component: TrademarkPolicyComponent
-          },
-        ],
-      },
-      {
-        path: 'tv',
-        component: TelevisionComponent
-      },
-      {
-        path: 'status',
-        component: StatusViewComponent
-      },
-    ]
-  },
-  {
-    path: 'tv',
-    component: TelevisionComponent
-  },
     {
       path: 'status',
       component: StatusViewComponent
     },
+    {
+      path: 'sponsor',
+      component: SponsorComponent,
+    },
+    {
+      path: '',
+      loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule)
+    },
     {
       path: '**',
-    redirectTo: '/testnet'
+      redirectTo: ''
-  }];
+    },
+  ];
 }
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     initialNavigation: 'enabled',
     scrollPositionRestoration: 'enabled',
-    anchorScrolling: 'enabled'
+    anchorScrolling: 'enabled',
+    preloadingStrategy: PreloadAllModules
   })],
 })
 export class AppRoutingModule { }

frontend/src/app/app.module.ts

@@ -2,141 +2,23 @@ import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-bro
 import { NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { NgxEchartsModule } from 'ngx-echarts';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
-
-import { StartComponent } from './components/start/start.component';
 import { ElectrsApiService } from './services/electrs-api.service';
-import { TransactionComponent } from './components/transaction/transaction.component';
-import { TransactionsListComponent } from './components/transactions-list/transactions-list.component';
 import { StateService } from './services/state.service';
-import { BlockComponent } from './components/block/block.component';
-import { AddressComponent } from './components/address/address.component';
-import { SearchFormComponent } from './components/search-form/search-form.component';
-import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
 import { WebsocketService } from './services/websocket.service';
-import { AddressLabelsComponent } from './components/address-labels/address-labels.component';
-import { MasterPageComponent } from './components/master-page/master-page.component';
-import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
-import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';
-import { AboutComponent } from './components/about/about.component';
-import { TelevisionComponent } from './components/television/television.component';
-import { StatisticsComponent } from './components/statistics/statistics.component';
-import { FooterComponent } from './components/footer/footer.component';
 import { AudioService } from './services/audio.service';
-import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
-import { FeeDistributionGraphComponent } from './components/fee-distribution-graph/fee-distribution-graph.component';
-import { IncomingTransactionsGraphComponent } from './components/incoming-transactions-graph/incoming-transactions-graph.component';
-import { TimeSpanComponent } from './components/time-span/time-span.component';
 import { SeoService } from './services/seo.service';
-import { MempoolGraphComponent } from './components/mempool-graph/mempool-graph.component';
-import { PoolRankingComponent } from './components/pool-ranking/pool-ranking.component';
-import { PoolComponent } from './components/pool/pool.component';
-import { LbtcPegsGraphComponent } from './components/lbtc-pegs-graph/lbtc-pegs-graph.component';
-import { AssetComponent } from './components/asset/asset.component';
-import { AssetsComponent } from './components/assets/assets.component';
-import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
-import { StatusViewComponent } from './components/status-view/status-view.component';
 import { SharedModule } from './shared/shared.module';
-import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
-import { FeesBoxComponent } from './components/fees-box/fees-box.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { DifficultyComponent } from './components/difficulty/difficulty.component';
-import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload } from '@fortawesome/free-solid-svg-icons';
-import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
-import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
-import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 import { LanguageService } from './services/language.service';
-import { SponsorComponent } from './components/sponsor/sponsor.component';
-import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component';
-import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component';
-import { AssetCirculationComponent } from './components/asset-circulation/asset-circulation.component';
-import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component';
-import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
-import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/hashrate-chart-pools.component';
-import { MiningStartComponent } from './components/mining-start/mining-start.component';
-import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
 import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
 import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
-import { GraphsComponent } from './components/graphs/graphs.component';
-import { DifficultyAdjustmentsTable } from './components/difficulty-adjustments-table/difficulty-adjustments-table.components';
-import { BlocksList } from './components/blocks-list/blocks-list.component';
-import { RewardStatsComponent } from './components/reward-stats/reward-stats.component';
-import { DataCyDirective } from './data-cy.directive';
-import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component';
-import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component';
-import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component';
-import { LoadingIndicatorComponent } from './components/loading-indicator/loading-indicator.component';
-import { IndexingProgressComponent } from './components/indexing-progress/indexing-progress.component';
-import { BlockSizesWeightsGraphComponent } from './components/block-sizes-weights-graph/block-sizes-weights-graph.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    AboutComponent,
-    MasterPageComponent,
-    BisqMasterPageComponent,
-    LiquidMasterPageComponent,
-    TelevisionComponent,
-    StartComponent,
-    StatisticsComponent,
-    TransactionComponent,
-    BlockComponent,
-    TransactionsListComponent,
-    AddressComponent,
-    LatestBlocksComponent,
-    SearchFormComponent,
-    TimeSpanComponent,
-    AddressLabelsComponent,
-    FooterComponent,
-    MempoolBlockComponent,
-    FeeDistributionGraphComponent,
-    IncomingTransactionsGraphComponent,
-    MempoolGraphComponent,
-    PoolRankingComponent,
-    PoolComponent,
-    LbtcPegsGraphComponent,
-    AssetComponent,
-    AssetsComponent,
-    StatusViewComponent,
-    FeesBoxComponent,
-    DashboardComponent,
-    DifficultyComponent,
-    TermsOfServiceComponent,
-    PrivacyPolicyComponent,
-    TrademarkPolicyComponent,
-    SponsorComponent,
-    PushTransactionComponent,
-    AssetsNavComponent,
-    AssetsFeaturedComponent,
-    AssetGroupComponent,
-    AssetCirculationComponent,
-    MiningDashboardComponent,
-    HashrateChartComponent,
-    HashrateChartPoolsComponent,
-    MiningStartComponent,
-    AmountShortenerPipe,
-    GraphsComponent,
-    DifficultyAdjustmentsTable,
-    BlocksList,
-    DataCyDirective,
-    RewardStatsComponent,
-    BlockFeesGraphComponent,
-    BlockRewardsGraphComponent,
-    BlockFeeRatesGraphComponent,
-    LoadingIndicatorComponent,
-    IndexingProgressComponent,
-    BlockSizesWeightsGraphComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
@@ -144,14 +26,7 @@ import { BlockSizesWeightsGraphComponent } from './components/block-sizes-weight
     AppRoutingModule,
     HttpClientModule,
     BrowserAnimationsModule,
-    InfiniteScrollModule,
-    NgbTypeaheadModule,
-    NgbModule,
-    FontAwesomeModule,
     SharedModule,
-    NgxEchartsModule.forRoot({
-      echarts: () => import('echarts')
-    })
   ],
   providers: [
     ElectrsApiService,
@@ -167,41 +42,4 @@ import { BlockSizesWeightsGraphComponent } from './components/block-sizes-weight
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule {
+export class AppModule { }
-  constructor(library: FaIconLibrary) {
-    library.addIcons(faInfoCircle);
-    library.addIcons(faChartArea);
-    library.addIcons(faTv);
-    library.addIcons(faTachometerAlt);
-    library.addIcons(faCubes);
-    library.addIcons(faHammer);
-    library.addIcons(faCogs);
-    library.addIcons(faThList);
-    library.addIcons(faList);
-    library.addIcons(faTachometerAlt);
-    library.addIcons(faDatabase);
-    library.addIcons(faSearch);
-    library.addIcons(faLink);
-    library.addIcons(faBolt);
-    library.addIcons(faTint);
-    library.addIcons(faFilter);
-    library.addIcons(faAngleDown);
-    library.addIcons(faAngleUp);
-    library.addIcons(faExchangeAlt);
-    library.addIcons(faAngleDoubleUp);
-    library.addIcons(faAngleDoubleDown);
-    library.addIcons(faChevronDown);
-    library.addIcons(faFileAlt);
-    library.addIcons(faRedoAlt);
-    library.addIcons(faArrowAltCircleRight);
-    library.addIcons(faExternalLinkAlt);
-    library.addIcons(faSortUp);
-    library.addIcons(faCaretUp);
-    library.addIcons(faCaretDown);
-    library.addIcons(faAngleRight);
-    library.addIcons(faAngleLeft);
-    library.addIcons(faBook);
-    library.addIcons(faListUl);
-    library.addIcons(faDownload);
-  }
-}

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

@@ -24,6 +24,7 @@ import { BisqAddressComponent } from './bisq-address/bisq-address.component';
 import { BisqStatsComponent } from './bisq-stats/bisq-stats.component';
 import { BsqAmountComponent } from './bsq-amount/bsq-amount.component';
 import { BisqTradesComponent } from './bisq-trades/bisq-trades.component';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [
@@ -46,6 +47,7 @@ import { BisqTradesComponent } from './bisq-trades/bisq-trades.component';
     BisqMainDashboardComponent,
   ],
   imports: [
+    CommonModule,
     BisqRoutingModule,
     SharedModule,
     NgbPaginationModule,

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

@@ -66,9 +66,14 @@
 
     <div class="text-center">
       <ng-template [ngIf]="isLoadingTransactions">
-        <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
+
-          <span class="skeleton-loader"></span>
+        <ng-container *ngIf="addressLoadingStatus$ as addressLoadingStatus">
+          <div class="header-bg box" style="padding: 12px; margin-bottom: 10px;">
+            <div class="progress progress-dark">
+              <div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
             </div>
+          </div>
+        </ng-container>
 
         <div class="header-bg box">
           <div class="row" style="height: 107px;">
@@ -81,13 +86,6 @@
           </div>
         </div>
 
-        <ng-container *ngIf="addressLoadingStatus$ | async as addressLoadingStatus">
-          <br>
-          <div class="progress progress-dark">
-            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
-          </div>
-        </ng-container>
-
       </ng-template>
 
       <ng-template [ngIf]="retryLoadMore">
@@ -155,3 +153,9 @@
 <ng-template #confidentialTd>
   <td i18n="shared.confidential">Confidential</td>
 </ng-template>
+
+<ng-template #headerLoader>
+  <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
+    <span class="skeleton-loader"></span>
+  </div>
+</ng-template>

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

@@ -200,9 +200,13 @@
     <ng-template [ngIf]="isLoadingTransactions">
       <div class="text-center mb-4" class="tx-skeleton">
 
+        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus; else headerLoader">
           <div class="header-bg box">
-          <span class="skeleton-loader"></span>
+            <div class="progress progress-dark" style="margin: 4px; height: 14px;">
+              <div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
             </div>
+          </div>
+        </ng-container>
 
         <div class="header-bg box">
           <div class="row">
@@ -215,14 +219,6 @@
             </div>
           </div>
         </div>
-
-        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus">
-          <br>
-          <div class="progress progress-dark">
-            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
-          </div>
-        </ng-container>
-
       </div>
     </ng-template>
     <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
@@ -281,6 +277,12 @@
     </div>
   </ng-template>
 
+  <ng-template #headerLoader>
+    <div class="header-bg box">
+      <span class="skeleton-loader"></span>
+    </div>
+  </ng-template>
+
 </div>
 
 <br>

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

@@ -38,7 +38,7 @@
         <a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" i18n-title="master-page.blocks" title="Blocks"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-graphs">
-        <a class="nav-link" [routerLink]="['/graphs/mempool' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
+        <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
       </li>
       <li class="nav-item d-none d-lg-block" routerLinkActive="active" id="btn-tv">
         <a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>

frontend/src/app/components/mining-start/mining-start.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

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

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-mining-start',
-  templateUrl: './mining-start.component.html',
-})
-export class MiningStartComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

frontend/src/app/docs/api-docs/api-docs.component.html

@@ -73,15 +73,15 @@
                 </ng-template>
               </div>
               <ng-container *ngIf="network.val === 'bisq' && item.codeExample.hasOwnProperty('bisq');else liquid_code_example" #bisq_code_example>
-                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.bisq" [network]="network.val" ></app-code-template>
+                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.bisq" [network]="network.val" [showCodeExample]="item.showJsExamples"></app-code-template>
               </ng-container>
               <ng-template #liquid_code_example>
                 <ng-container *ngIf="network.val === 'liquid' && item.codeExample.hasOwnProperty('liquid');else default_code_example">
-                  <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.liquid" [network]="network.val" ></app-code-template>
+                  <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.liquid" [network]="network.val" [showCodeExample]="item.showJsExamples"></app-code-template>
                 </ng-container>
               </ng-template>
               <ng-template #default_code_example>
-                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.default" [network]="network.val" ></app-code-template>
+                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.default" [network]="network.val" [showCodeExample]="item.showJsExamples"></app-code-template>
               </ng-template>
             </div>
           </div>

frontend/src/app/docs/code-template/code-template.component.html

@@ -7,7 +7,7 @@
         <pre><code [innerText]="wrapCurlTemplate(code)"></code></pre>
       </ng-template>
     </li>
-    <li ngbNavItem *ngIf="network !== 'liquidtestnet'">
+    <li ngbNavItem *ngIf="showCodeExample[network]">
       <a ngbNavLink (click)="adjustContainerHeight( $event )" >CommonJS</a>
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCommonJS(code)"></app-clipboard></div>
@@ -17,8 +17,8 @@
         <pre><code [innerText]="wrapCommonJS(code)"></code></pre>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem *ngIf="showCodeExample[network]">
-      <a ngbNavLink (click)="adjustContainerHeight( $event )" *ngIf="network !== 'liquidtestnet'">ES Module</a>
+      <a ngbNavLink (click)="adjustContainerHeight( $event )">ES Module</a>
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="wrapImportTemplate()"></app-clipboard></div>
         <div class="links">

frontend/src/app/docs/code-template/code-template.component.ts

@@ -12,6 +12,7 @@ export class CodeTemplateComponent implements OnInit {
   @Input() hostname: string;
   @Input() baseNetworkUrl: string;
   @Input() method: 'GET' | 'POST' | 'websocket' = 'GET';
+  @Input() showCodeExample: any;
   env: Env;
 
   constructor(

frontend/src/app/graphs/graphs.module.ts

@@ -0,0 +1,58 @@
+import { NgModule } from '@angular/core';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { GraphsRoutingModule } from './graphs.routing.module';
+import { SharedModule } from '../shared/shared.module';
+
+import { BlockFeesGraphComponent } from '../components/block-fees-graph/block-fees-graph.component';
+import { BlockRewardsGraphComponent } from '../components/block-rewards-graph/block-rewards-graph.component';
+import { BlockFeeRatesGraphComponent } from '../components/block-fee-rates-graph/block-fee-rates-graph.component';
+import { BlockSizesWeightsGraphComponent } from '../components/block-sizes-weights-graph/block-sizes-weights-graph.component';
+import { FeeDistributionGraphComponent } from '../components/fee-distribution-graph/fee-distribution-graph.component';
+import { IncomingTransactionsGraphComponent } from '../components/incoming-transactions-graph/incoming-transactions-graph.component';
+import { MempoolGraphComponent } from '../components/mempool-graph/mempool-graph.component';
+import { LbtcPegsGraphComponent } from '../components/lbtc-pegs-graph/lbtc-pegs-graph.component';
+import { GraphsComponent } from '../components/graphs/graphs.component';
+import { StatisticsComponent } from '../components/statistics/statistics.component';
+import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
+import { PoolRankingComponent } from '../components/pool-ranking/pool-ranking.component';
+import { PoolComponent } from '../components/pool/pool.component';
+import { TelevisionComponent } from '../components/television/television.component';
+import { DashboardComponent } from '../dashboard/dashboard.component';
+import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
+import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-chart.component';
+import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [
+    DashboardComponent,
+    MempoolBlockComponent,
+
+    MiningDashboardComponent,
+    PoolComponent,
+    PoolRankingComponent,
+    TelevisionComponent,
+
+    StatisticsComponent,
+    GraphsComponent,
+    BlockFeesGraphComponent,
+    BlockRewardsGraphComponent,
+    BlockFeeRatesGraphComponent,
+    BlockSizesWeightsGraphComponent,
+    FeeDistributionGraphComponent,
+    IncomingTransactionsGraphComponent,
+    MempoolGraphComponent,
+    LbtcPegsGraphComponent,
+    HashrateChartComponent,
+    HashrateChartPoolsComponent,
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    GraphsRoutingModule,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('echarts')
+    })
+  ]
+})
+export class GraphsModule { }

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

@@ -0,0 +1,116 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { BlockFeeRatesGraphComponent } from '../components/block-fee-rates-graph/block-fee-rates-graph.component';
+import { BlockFeesGraphComponent } from '../components/block-fees-graph/block-fees-graph.component';
+import { BlockRewardsGraphComponent } from '../components/block-rewards-graph/block-rewards-graph.component';
+import { BlockSizesWeightsGraphComponent } from '../components/block-sizes-weights-graph/block-sizes-weights-graph.component';
+import { GraphsComponent } from '../components/graphs/graphs.component';
+import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-chart.component';
+import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
+import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
+import { MasterPageComponent } from '../components/master-page/master-page.component';
+import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
+import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
+import { PoolRankingComponent } from '../components/pool-ranking/pool-ranking.component';
+import { PoolComponent } from '../components/pool/pool.component';
+import { StartComponent } from '../components/start/start.component';
+import { StatisticsComponent } from '../components/statistics/statistics.component';
+import { TelevisionComponent } from '../components/television/television.component';
+import { DashboardComponent } from '../dashboard/dashboard.component';
+
+const browserWindow = window || {};
+// @ts-ignore
+const browserWindowEnv = browserWindow.__env || {};
+const isLiquid = browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: isLiquid ? LiquidMasterPageComponent : MasterPageComponent,
+    children: [
+      {
+        path: 'mining/pool/:slug',
+        component: PoolComponent,
+      },
+      {
+        path: 'mining',
+        component: StartComponent,
+        children: [
+          {
+            path: '',
+            component: MiningDashboardComponent,
+          },
+        ]
+      },
+      {
+        path: 'mempool-block/:id',
+        component: StartComponent,
+        children: [
+          {
+            path: '',
+            component: MempoolBlockComponent,
+          },
+        ]
+      },
+      {
+        path: 'graphs',
+        component: GraphsComponent,
+        children: [
+          {
+            path: 'mempool',
+            component: StatisticsComponent,
+          },
+          {
+            path: 'mining/hashrate-difficulty',
+            component: HashrateChartComponent,
+          },
+          {
+            path: 'mining/pools-dominance',
+            component: HashrateChartPoolsComponent,
+          },
+          {
+            path: 'mining/pools',
+            component: PoolRankingComponent,
+          },
+          {
+            path: 'mining/block-fees',
+            component: BlockFeesGraphComponent,
+          },
+          {
+            path: 'mining/block-rewards',
+            component: BlockRewardsGraphComponent,
+          },
+          {
+            path: 'mining/block-fee-rates',
+            component: BlockFeeRatesGraphComponent,
+          },
+          {
+            path: 'mining/block-sizes-weights',
+            component: BlockSizesWeightsGraphComponent,
+          },
+          {
+            path: '',
+            redirectTo: 'mempool',
+          },
+        ]
+      },
+      {
+        path: '',
+        component: StartComponent,
+        children: [{
+          path: '',
+          component: DashboardComponent,
+        }]
+      },
+    ]
+  },
+  {
+    path: 'tv',
+    component: TelevisionComponent
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class GraphsRoutingModule { }

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

@@ -1,5 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
+  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload } from '@fortawesome/free-solid-svg-icons';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { MasterPageComponent } from '../components/master-page/master-page.component';
+import { BisqMasterPageComponent } from '../components/bisq-master-page/bisq-master-page.component';
+import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
+import { AboutComponent } from '../components/about/about.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';
@@ -31,6 +42,38 @@ import { AmountComponent } from '../components/amount/amount.component';
 import { RouterModule } from '@angular/router';
 import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
 
+import { StartComponent } from '../components/start/start.component';
+import { TransactionComponent } from '../components/transaction/transaction.component';
+import { TransactionsListComponent } from '../components/transactions-list/transactions-list.component';
+import { BlockComponent } from '../components/block/block.component';
+import { AddressComponent } from '../components/address/address.component';
+import { SearchFormComponent } from '../components/search-form/search-form.component';
+import { LatestBlocksComponent } from '../components/latest-blocks/latest-blocks.component';
+import { AddressLabelsComponent } from '../components/address-labels/address-labels.component';
+import { FooterComponent } from '../components/footer/footer.component';
+import { TimeSpanComponent } from '../components/time-span/time-span.component';
+import { AssetComponent } from '../components/asset/asset.component';
+import { AssetsComponent } from '../components/assets/assets.component';
+import { AssetsNavComponent } from '../components/assets/assets-nav/assets-nav.component';
+import { StatusViewComponent } from '../components/status-view/status-view.component';
+import { FeesBoxComponent } from '../components/fees-box/fees-box.component';
+import { DifficultyComponent } from '../components/difficulty/difficulty.component';
+import { TermsOfServiceComponent } from '../components/terms-of-service/terms-of-service.component';
+import { PrivacyPolicyComponent } from '../components/privacy-policy/privacy-policy.component';
+import { TrademarkPolicyComponent } from '../components/trademark-policy/trademark-policy.component';
+import { SponsorComponent } from '../components/sponsor/sponsor.component';
+import { PushTransactionComponent } from '../components/push-transaction/push-transaction.component';
+import { AssetsFeaturedComponent } from '../components/assets/assets-featured/assets-featured.component';
+import { AssetGroupComponent } from '../components/assets/asset-group/asset-group.component';
+import { AssetCirculationComponent } from '../components/asset-circulation/asset-circulation.component';
+import { AmountShortenerPipe } from '../shared/pipes/amount-shortener.pipe';
+import { DifficultyAdjustmentsTable } from '../components/difficulty-adjustments-table/difficulty-adjustments-table.components';
+import { BlocksList } from '../components/blocks-list/blocks-list.component';
+import { RewardStatsComponent } from '../components/reward-stats/reward-stats.component';
+import { DataCyDirective } from '../data-cy.directive';
+import { LoadingIndicatorComponent } from '../components/loading-indicator/loading-indicator.component';
+import { IndexingProgressComponent } from '../components/indexing-progress/indexing-progress.component';
+
 @NgModule({
   declarations: [
     ClipboardComponent,
@@ -60,6 +103,42 @@ import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
     MempoolBlocksComponent,
     BlockchainBlocksComponent,
     AmountComponent,
+
+    AboutComponent,
+    MasterPageComponent,
+    BisqMasterPageComponent,
+    LiquidMasterPageComponent,
+    StartComponent,
+    TransactionComponent,
+    BlockComponent,
+    TransactionsListComponent,
+    AddressComponent,
+    LatestBlocksComponent,
+    SearchFormComponent,
+    TimeSpanComponent,
+    AddressLabelsComponent,
+    FooterComponent,
+    AssetComponent,
+    AssetsComponent,
+    StatusViewComponent,
+    FeesBoxComponent,
+    DifficultyComponent,
+    TermsOfServiceComponent,
+    PrivacyPolicyComponent,
+    TrademarkPolicyComponent,
+    SponsorComponent,
+    PushTransactionComponent,
+    AssetsNavComponent,
+    AssetsFeaturedComponent,
+    AssetGroupComponent,
+    AssetCirculationComponent,
+    AmountShortenerPipe,
+    DifficultyAdjustmentsTable,
+    BlocksList,
+    DataCyDirective,
+    RewardStatsComponent,
+    LoadingIndicatorComponent,
+    IndexingProgressComponent,
   ],
   imports: [
     CommonModule,
@@ -71,17 +150,26 @@ import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
     NgbPaginationModule,
     NgbDropdownModule,
     NgbAccordionModule,
+    InfiniteScrollModule,
+    NgbTypeaheadModule,
+    NgbModule,
+    FontAwesomeModule,
   ],
   providers: [
     VbytesPipe,
     RelativeUrlPipe,
     NoSanitizePipe,
+    ShortenStringPipe,
+    CapAddressPipe,
   ],
   exports: [
     RouterModule,
+    InfiniteScrollModule,
+    NgbTypeaheadModule,
+    NgbModule,
+    FontAwesomeModule,
     NgbAccordionModule,
     NgbNavModule,
-    CommonModule,
     ReactiveFormsModule,
     NgbTooltipModule,
     NgbButtonsModule,
@@ -114,6 +202,75 @@ import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
     MempoolBlocksComponent,
     BlockchainBlocksComponent,
     AmountComponent,
+
+    StartComponent,
+    TransactionComponent,
+    BlockComponent,
+    TransactionsListComponent,
+    AddressComponent,
+    LatestBlocksComponent,
+    SearchFormComponent,
+    TimeSpanComponent,
+    AddressLabelsComponent,
+    FooterComponent,
+    AssetComponent,
+    AssetsComponent,
+    StatusViewComponent,
+    FeesBoxComponent,
+    DifficultyComponent,
+    TermsOfServiceComponent,
+    PrivacyPolicyComponent,
+    TrademarkPolicyComponent,
+    SponsorComponent,
+    PushTransactionComponent,
+    AssetsNavComponent,
+    AssetsFeaturedComponent,
+    AssetGroupComponent,
+    AssetCirculationComponent,
+    AmountShortenerPipe,
+    DifficultyAdjustmentsTable,
+    BlocksList,
+    DataCyDirective,
+    RewardStatsComponent,
+    LoadingIndicatorComponent,
+    IndexingProgressComponent,
   ]
 })
-export class SharedModule {}
+export class SharedModule {
+  constructor(library: FaIconLibrary) {
+    library.addIcons(faInfoCircle);
+    library.addIcons(faChartArea);
+    library.addIcons(faTv);
+    library.addIcons(faTachometerAlt);
+    library.addIcons(faCubes);
+    library.addIcons(faHammer);
+    library.addIcons(faCogs);
+    library.addIcons(faThList);
+    library.addIcons(faList);
+    library.addIcons(faTachometerAlt);
+    library.addIcons(faDatabase);
+    library.addIcons(faSearch);
+    library.addIcons(faLink);
+    library.addIcons(faBolt);
+    library.addIcons(faTint);
+    library.addIcons(faFilter);
+    library.addIcons(faAngleDown);
+    library.addIcons(faAngleUp);
+    library.addIcons(faExchangeAlt);
+    library.addIcons(faAngleDoubleUp);
+    library.addIcons(faAngleDoubleDown);
+    library.addIcons(faChevronDown);
+    library.addIcons(faFileAlt);
+    library.addIcons(faRedoAlt);
+    library.addIcons(faArrowAltCircleRight);
+    library.addIcons(faExternalLinkAlt);
+    library.addIcons(faSortUp);
+    library.addIcons(faCaretUp);
+    library.addIcons(faCaretDown);
+    library.addIcons(faAngleRight);
+    library.addIcons(faAngleLeft);
+    library.addIcons(faBook);
+    library.addIcons(faListUl);
+    library.addIcons(faDownload);
+  }
+}

frontend/src/styles.scss

@@ -655,6 +655,10 @@ h1, h2, h3 {
   background-color: #24273e;
 }
 
+.progress-light {
+  background-color: #2e324e;
+}
+
 .mt-2-5, .my-2-5 {
   margin-top: 0.75rem !important;
 }