Merge pull request #352 from mempool/simon/signet-frontend

Signet support in the frontend.

backend/src/config.ts

@@ -2,7 +2,7 @@ const configFile = require('../mempool-config.json');
 
 interface IConfig {
   MEMPOOL: {
-    NETWORK: 'mainnet' | 'testnet' | 'liquid';
+    NETWORK: 'mainnet' | 'testnet' | 'signet' | 'liquid';
     BACKEND: 'esplora' | 'electrum' | 'none';
     HTTP_PORT: number;
     SPAWN_CLUSTER_PROCS: number;

frontend/mempool-frontend-config.sample.json

@@ -1,5 +1,6 @@
 {
   "TESTNET_ENABLED": false,
+  "SIGNET_ENABLED": false,
   "LIQUID_ENABLED": false,
   "BISQ_ENABLED": false,
   "BISQ_SEPARATE_BACKEND": false,

frontend/proxy.conf.json

@@ -41,6 +41,28 @@
       "^/testnet/api": ""
     }
   },
+  "/signet/api/v1": {
+    "target": "http://localhost:8999/",
+    "secure": false,
+    "pathRewrite": {
+      "^/signet/api/v1": "/api/v1"
+    }
+  },
+  "/signet/api/v1/ws": {
+    "target": "http://localhost:8999/",
+    "secure": false,
+    "ws": true,
+    "pathRewrite": {
+      "^/signet/api": "/api/v1/ws"
+    }
+  },
+  "/signet/api/": {
+    "target": "http://localhost:50001/",
+    "secure": false,
+    "pathRewrite": {
+      "^/signet/api": ""
+    }
+  },
   "/liquid/api/v1/ws": {
     "target": "http://localhost:8999/",
     "secure": false,

frontend/server.ts

@@ -91,6 +91,17 @@ export function app(locale: string): express.Express {
   server.get('/testnet/tv', getLocalizedSSR(indexHtml));
   server.get('/testnet/status', getLocalizedSSR(indexHtml));
   server.get('/testnet/about', getLocalizedSSR(indexHtml));
+  server.get('/signet', getLocalizedSSR(indexHtml));
+  server.get('/signet/tx/*', getLocalizedSSR(indexHtml));
+  server.get('/signet/block/*', getLocalizedSSR(indexHtml));
+  server.get('/signet/mempool-block/*', getLocalizedSSR(indexHtml));
+  server.get('/signet/address/*', getLocalizedSSR(indexHtml));
+  server.get('/signet/blocks', getLocalizedSSR(indexHtml));
+  server.get('/signet/graphs', getLocalizedSSR(indexHtml));
+  server.get('/signet/api', getLocalizedSSR(indexHtml));
+  server.get('/signet/tv', getLocalizedSSR(indexHtml));
+  server.get('/signet/status', getLocalizedSSR(indexHtml));
+  server.get('/signet/about', getLocalizedSSR(indexHtml));
   server.get('/bisq', getLocalizedSSR(indexHtml));
   server.get('/bisq/tx/*', getLocalizedSSR(indexHtml));
   server.get('/bisq/blocks', getLocalizedSSR(indexHtml));

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

@@ -202,6 +202,68 @@ const routes: Routes = [
       },
     ]
   },
+  {
+    path: 'signet',
+    children: [
+      {
+        path: '',
+        component: MasterPageComponent,
+        children: [
+          {
+            path: '',
+            component: StartComponent,
+            children: [
+              {
+                path: '',
+                component: DashboardComponent
+              },
+              {
+                path: 'tx/:id',
+                component: TransactionComponent
+              },
+              {
+                path: 'block/:id',
+                component: BlockComponent
+              },
+              {
+                path: 'mempool-block/:id',
+                component: MempoolBlockComponent
+              },
+            ],
+          },
+          {
+            path: 'blocks',
+            component: LatestBlocksComponent,
+          },
+          {
+            path: 'graphs',
+            component: StatisticsComponent,
+          },
+          {
+            path: 'address/:id',
+            children: [],
+            component: AddressComponent
+          },
+          {
+            path: 'api',
+            component: ApiDocsComponent,
+          },
+        ],
+      },
+      {
+        path: 'tv',
+        component: TelevisionComponent
+      },
+      {
+        path: 'status',
+        component: StatusViewComponent
+      },
+      {
+        path: '**',
+        redirectTo: ''
+      },
+    ]
+  },
   {
     path: 'bisq',
     component: MasterPageComponent,

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

@@ -9,5 +9,6 @@
     ‎{{ satoshis / 100000000 | number : digitsInfo }}
     <ng-template [ngIf]="network === 'liquid'">L-</ng-template>
     <ng-template [ngIf]="network === 'testnet'">t</ng-template>BTC
+    <ng-template [ngIf]="network === 'signet'">s</ng-template>BTC
   </ng-template>
 </ng-template>

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

@@ -32,6 +32,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
     bisq: ['#9339f4', '#105fb0'],
     liquid: ['#116761', '#183550'],
     testnet: ['#1d486f', '#183550'],
+    signet: ['#6f1d5d', '#471850'],
   };
 
   constructor(

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

@@ -11,12 +11,13 @@
     </ng-container>
   </a>
 
-  <div ngbDropdown display="dynamic" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
+  <div ngbDropdown display="dynamic" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
     <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
       <img src="./resources/{{ network.val === '' ? 'bitcoin' : network.val }}-logo.png" style="width: 25px; height: 25px;" class="mr-1">
     </button>
     <div ngbDropdownMenu>
       <button ngbDropdownItem class="mainnet" routerLink="/"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</button>
+      <button ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" routerLink="/signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</button>
       <button ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</button>
       <h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
       <button ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="mainnet" [class.active]="network.val === 'bisq'" routerLink="/bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>

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

@@ -67,6 +67,10 @@ nav {
   background-color: #1d486f;
 }
 
+.signet.active {
+  background-color: #6f1d5d;
+}
+
 .dropdown-divider {
   border-top: 1px solid #121420;
 }

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

@@ -17,6 +17,7 @@ export interface ILoadingIndicators { [name: string]: number; }
 
 export interface Env {
   TESTNET_ENABLED: boolean;
+  SIGNET_ENABLED: boolean;
   LIQUID_ENABLED: boolean;
   BISQ_ENABLED: boolean;
   BISQ_SEPARATE_BACKEND: boolean;
@@ -30,6 +31,7 @@ export interface Env {
 
 const defaultEnv: Env = {
   'TESTNET_ENABLED': false,
+  'SIGNET_ENABLED': false,
   'LIQUID_ENABLED': false,
   'BISQ_ENABLED': false,
   'BISQ_SEPARATE_BACKEND': false,
@@ -102,7 +104,7 @@ export class StateService {
   }
 
   setNetworkBasedonUrl(url: string) {
-    const networkMatches = url.match(/\/(bisq|testnet|liquid)/);
+    const networkMatches = url.match(/\/(bisq|testnet|liquid|signet)/);
     switch (networkMatches && networkMatches[1]) {
       case 'liquid':
         if (this.network !== 'liquid') {
@@ -110,6 +112,12 @@ export class StateService {
           this.networkChanged$.next('liquid');
         }
         return;
+      case 'signet':
+        if (this.network !== 'signet') {
+          this.network = 'signet';
+          this.networkChanged$.next('signet');
+        }
+        return;
       case 'testnet':
         if (this.network !== 'testnet') {
           this.network = 'testnet';

frontend/src/styles.scss

@@ -94,6 +94,10 @@ body {
   background-color: #1d486f !important;
 }
 
+.navbar-nav.signet > .active {
+  background-color: #6f1d5d !important;
+}
+
 .form-control {
   color: #495057;
 }
@@ -425,6 +429,10 @@ h1, h2, h3 {
   background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #1d486f 0%, #183550 100%);
 }
 
+.progress-mempool.signet {
+  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #6f1d5d 0%, #471850 100%);
+}
+
 .progress-mempool.liquid {
   background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #116761 0%, #183550 100%);
 }