Dynamic dropdown.

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

@@ -358,6 +358,22 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
         path: 'api',
         component: ApiDocsComponent,
       },
+      {
+        path: 'about',
+        component: AboutComponent,
+      },
+      {
+        path: 'terms-of-service',
+        component: TermsOfServiceComponent
+      },
+      {
+        path: 'trademark-policy',
+        component: TrademarkPolicyComponent
+      },
+      {
+        path: 'sponsor',
+        component: SponsorComponent,
+      },
     ],
   },
   {

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

@@ -10,6 +10,20 @@
     </ng-container>
   </a>
 
+  <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/bisq-logo.png" style="width: 25px; height: 25px;" class="mr-1">
+    </button>
+    <div ngbDropdownMenu>
+      <a href="https://mempool.space" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
+      <a href="https://mempool.space/signet" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
+      <a href="https://mempool.space/testnet" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
+      <h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
+      <button ngbDropdownItem class="mainnet active" routerLink="/"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
+      <a href="https://liquid.network" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</a>
+    </div>
+  </div>
+
   <div class="navbar-collapse" id="navbarCollapse">
     <ul class="navbar-nav">
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">

frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { StateService } from '../../services/state.service';
+import { Env, StateService } from '../../services/state.service';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -10,12 +10,14 @@ import { Observable } from 'rxjs';
 export class BisqMasterPageComponent implements OnInit {
   connectionState$: Observable<number>;
   navCollapsed = false;
+  env: Env;
 
   constructor(
     private stateService: StateService,
   ) { }
 
   ngOnInit() {
+    this.env = this.stateService.env;
     this.connectionState$ = this.stateService.connectionState$;
   }
 

frontend/src/app/components/language-selector/language-selector.component.ts

@@ -43,6 +43,11 @@ export class LanguageSelectorComponent implements OnInit {
     try {
       document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`;
     } catch (e) { }
-    this.document.location.href = `/${language}/${this.stateService.network}`;
+    
+    if (this.stateService.env.BASE_MODULE === 'mempool') {
+      this.document.location.href = `/${language}/${this.stateService.network}`;
+    } else {
+      this.document.location.href = `/${language}}`;
+    }
   }
 }

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

@@ -1,4 +1,3 @@
-<ng-container *ngIf="{ val: network$ | async } as network">
 <header>
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
@@ -11,8 +10,22 @@
     </ng-container>
   </a>
 
+  <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/liquid-logo.png" style="width: 25px; height: 25px;" class="mr-1">
+    </button>
+    <div ngbDropdownMenu>
+      <a href="https://mempool.space" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
+      <a href="https://mempool.space/signet" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
+      <a href="https://mempool.space/testnet" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
+      <h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
+      <a href="https://bisq.markets" ngbDropdownItem class="mainnet"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
+      <button ngbDropdownItem class="liquid active" routerLink="/"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
+    </div>
+  </div>
+
   <div class="navbar-collapse" id="navbarCollapse">
-    <ul class="navbar-nav {{ network.val }}">
+    <ul class="navbar-nav liquid">
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
         <a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tachometer-alt']" [fixedWidth]="true" i18n-title="master-page.dashboard" title="Dashboard"></fa-icon></a>
       </li>
@@ -44,6 +57,4 @@
 
 <router-outlet></router-outlet>
 
-<br>
+<br>
-
-</ng-container>

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

@@ -74,7 +74,7 @@ li.nav-item {
 
 @media (min-width: 576px) {
   .navbar-brand {
-    width: 140px;
+    width: 120px;
   }
 }
 
@@ -86,7 +86,7 @@ nav {
   position: absolute;
   top: 13px;
   left: 0px;
-  width: 140px;
+  width: 120px;
 }
 
 .badge {

frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts

@@ -9,7 +9,6 @@ import { Observable} from 'rxjs';
 })
 export class LiquidMasterPageComponent implements OnInit {
   env: Env;
-  network$: Observable<string>;
   connectionState$: Observable<number>;
   navCollapsed = false;
   isMobile = window.innerWidth <= 767.98;

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

@@ -20,8 +20,10 @@
       <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>
+      <a href="https://bisq.markets" ngbDropdownItem *ngIf="env.BISQ_ENABLED && env.OFFICIAL_MEMPOOL_SPACE" class="mainnet"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
-      <button ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network.val === 'liquid'" routerLink="/liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
+      <button ngbDropdownItem *ngIf="env.BISQ_ENABLED && !env.OFFICIAL_MEMPOOL_SPACE" class="mainnet" [class.active]="network.val === 'bisq'" routerLink="/bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
+      <a href="https://liquid.network" ngbDropdownItem *ngIf="env.LIQUID_ENABLED && env.OFFICIAL_MEMPOOL_SPACE" class="liquid" [class.active]="network.val === 'liquid'"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</a>
+      <button ngbDropdownItem *ngIf="env.LIQUID_ENABLED && !env.OFFICIAL_MEMPOOL_SPACE" class="liquid" [class.active]="network.val === 'liquid'" routerLink="/liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
     </div>
   </div>
 

frontend/src/index.liquid.html

@@ -6,7 +6,7 @@
   <base href="/">
 
   <meta name="description" content="An open-source explorer developed for the Bitcoin community, focusing on the emerging transaction fee market to help our transition into a multi-layer ecosystem." />
-  <meta property="og:image" content="https://liquid.network/resources/mempool-space-preview.png" />
+  <meta property="og:image" content="https://liquid.network/resources/liquid-network-preview.png" />
   <meta property="og:image:type" content="image/png" />
   <meta property="og:image:width" content="1000" />
   <meta property="og:image:height" content="500" />
@@ -15,18 +15,18 @@
   <meta property="twitter:creator" content="@mempool">
   <meta property="twitter:title" content="mempool">
   <meta property="twitter:description" content="An open-source explorer developed for the Bitcoin community, focusing on the transition into a multi-layer ecosystem." />
-  <meta property="twitter:image:src" content="https://liquid.network/resources/mempool-space-preview.png" />
+  <meta property="twitter:image:src" content="https://liquid.network/resources/liquid-network-preview.png" />
   <meta property="twitter:domain" content="liquid.network">
   
-  <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon.png">
+  <!-- <link rel="apple-touch-icon" sizes="180x180" href="/resources/liquid/favicons/apple-touch-icon.png"> -->
-  <link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/resources/liquid/favicons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/resources/liquid/favicons/favicon-16x16.png">
-  <link rel="manifest" href="/resources/favicons/site.webmanifest">
+  <!-- <link rel="manifest" href="/resources/liquid/favicons/site.webmanifest"> -->
-  <link rel="shortcut icon" href="/resources/favicons/favicon.ico">
+  <link rel="shortcut icon" href="/resources/liquid/favicons/favicon.ico">
   <link id="canonical" rel="canonical" href="https://liquid.network">
 
   <meta name="msapplication-TileColor" content="#000000">
-  <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
+  <!-- <meta name="msapplication-config" content="/resources/liquid/favicons/browserconfig.xml"> -->
   <meta name="theme-color" content="#ffffff">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">

frontend/src/resources/liquid/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/resources/liquid/favicons/mstile-150x150.png"/>
+            <TileColor>#000000</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

frontend/src/resources/liquid/favicons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "mempool",
+    "short_name": "mempool",
+    "icons": [
+        {
+            "src": "/resources/favicons/liquid/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/resources/favicons/liquid/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#000000",
+    "background_color": "#000000",
+    "display": "standalone"
+}