Merge pull request #2146 from mempool/simon/subdomain-logo

Subdomain enterprise logo

frontend/src/app/app.module.ts

@@ -6,6 +6,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
 import { ElectrsApiService } from './services/electrs-api.service';
 import { StateService } from './services/state.service';
+import { EnterpriseService } from './services/enterprise.service';
 import { WebsocketService } from './services/websocket.service';
 import { AudioService } from './services/audio.service';
 import { SeoService } from './services/seo.service';
@@ -36,6 +37,7 @@ import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe
     AudioService,
     SeoService,
     StorageService,
+    EnterpriseService,
     LanguageService,
     ShortenStringPipe,
     FiatShortenerPipe,

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

@@ -1,6 +1,9 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
 <header>
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <ng-template [ngIf]="subdomain">
+    <img [src]="'/api/v1/enterprise/images/' + subdomain + '/logo'" height="35" class="subdomain_logo" onload="this.style.display='block'">
+  </ng-template>
   <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
     <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
       <img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }" alt="The Mempool Open Source Project logo">

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

@@ -145,3 +145,8 @@ nav {
 .navbar-dark .navbar-nav .nav-link {
   color: #f1f1f1;
 }
+
+.subdomain_logo {
+  margin-right: 15px;
+  display: none;
+}

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

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { LanguageService } from 'src/app/services/language.service';
+import { EnterpriseService } from 'src/app/services/enterprise.service';
 
 @Component({
   selector: 'app-master-page',
@@ -16,10 +17,12 @@ export class MasterPageComponent implements OnInit {
   isMobile = window.innerWidth <= 767.98;
   officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
   urlLanguage: string;
+  subdomain = '';
 
   constructor(
     public stateService: StateService,
     private languageService: LanguageService,
+    private enterpriseService: EnterpriseService,
   ) { }
 
   ngOnInit() {
@@ -27,6 +30,7 @@ export class MasterPageComponent implements OnInit {
     this.connectionState$ = this.stateService.connectionState$;
     this.network$ = merge(of(''), this.stateService.networkChanged$);
     this.urlLanguage = this.languageService.getLanguageForUrl();
+    this.subdomain = this.enterpriseService.getSubdomain();
   }
 
   collapse(): void {

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

@@ -238,6 +238,10 @@ export class ApiService {
     return this.httpClient.get<RewardStats>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/reward-stats/${blockCount}`);
   }
 
+  getEnterpriseInfo$(name: string): Observable<any> {
+    return this.httpClient.get<any>(this.apiBaseUrl + this.apiBasePath + `/api/v1/enterprise/info/` + name);
+  }
+
   getChannelByTxIds$(txIds: string[]): Observable<{ inputs: any[], outputs: any[] }> {
     let params = new HttpParams();
     txIds.forEach((txId: string) => {

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

@@ -0,0 +1,79 @@
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { ApiService } from './api.service';
+import { SeoService } from './seo.service';
+import { StateService } from './state.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EnterpriseService {
+  exclusiveHostName = '.mempool.space';
+  subdomain: string | null = null;
+  info: object = {};
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    private apiService: ApiService,
+    private seoService: SeoService,
+    private stateService: StateService,
+  ) {
+    const subdomain = this.document.location.hostname.indexOf(this.exclusiveHostName) > -1
+      && this.document.location.hostname.split(this.exclusiveHostName)[0] || false;
+    if (subdomain && subdomain.match(/^[A-z0-9-_]+$/)) {
+      this.subdomain = subdomain;
+      this.fetchSubdomainInfo();
+      this.disableSubnetworks();
+    } else {
+      this.insertMatomo();
+    }
+  }
+
+  getSubdomain() {
+    return this.subdomain;
+  }
+
+  disableSubnetworks() {
+    this.stateService.env.TESTNET_ENABLED = false;
+    this.stateService.env.LIQUID_ENABLED = false;
+    this.stateService.env.LIQUID_TESTNET_ENABLED = false;
+    this.stateService.env.SIGNET_ENABLED = false;
+    this.stateService.env.BISQ_ENABLED = false;
+  }
+
+  fetchSubdomainInfo() {
+    this.apiService.getEnterpriseInfo$(this.subdomain).subscribe((info) => {
+      this.info = info;
+      this.insertMatomo(info.site_id);
+      this.seoService.setEnterpriseTitle(info.title);
+    },
+    (error) => {
+      if (error.status === 404) {
+        window.location.href = 'https://mempool.space';
+      }
+    });
+  }
+
+  insertMatomo(siteId = 5) {
+    let statsUrl = '//stats.mempool.space/';
+    if (this.document.location.hostname === 'liquid.network') {
+      statsUrl = '//stats.liquid.network/';
+      siteId = 8;
+    } else if (this.document.location.hostname === 'bisq.markets') {
+      statsUrl = '//stats.bisq.markets/';
+      siteId = 7;
+    }
+
+    // @ts-ignore
+    const _paq = window._paq = window._paq || [];
+    _paq.push(['disableCookies']);
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function() {
+      _paq.push(['setTrackerUrl', statsUrl+'m.php']);
+      _paq.push(['setSiteId', siteId.toString()]);
+      const d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+      g.type='text/javascript'; g.async=true; g.src=statsUrl+'m.js'; s.parentNode.insertBefore(g,s);
+    })();
+  }
+}

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

@@ -7,6 +7,7 @@ import { StateService } from './state.service';
 })
 export class SeoService {
   network = '';
+  baseTitle = 'mempool';
 
   constructor(
     private titleService: Title,
@@ -26,18 +27,23 @@ export class SeoService {
     this.metaService.updateTag({ property: 'og:title', content: this.getTitle()});
   }
 
+  setEnterpriseTitle(title: string) {
+    this.baseTitle = title + ' - ' + this.baseTitle;
+    this.resetTitle();
+  }
+
   getTitle(): string {
     if (this.network === 'testnet')
-      return 'mempool - Bitcoin Testnet';
+      return this.baseTitle + ' - Bitcoin Testnet';
     if (this.network === 'signet')
-      return 'mempool - Bitcoin Signet';
+      return this.baseTitle + ' - Bitcoin Signet';
     if (this.network === 'liquid')
-      return 'mempool - Liquid Network';
+      return this.baseTitle + ' - Liquid Network';
     if (this.network === 'liquidtestnet')
-      return 'mempool - Liquid Testnet';
+      return this.baseTitle + ' - Liquid Testnet';
     if (this.network === 'bisq')
-      return 'mempool - Bisq Markets';
-    return 'mempool - ' + (this.network ? this.ucfirst(this.network) : 'Bitcoin') + ' Explorer';
+      return this.baseTitle + ' - Bisq Markets';
+    return this.baseTitle + ' - ' + (this.network ? this.ucfirst(this.network) : 'Bitcoin') + ' Explorer';
   }
 
   ucfirst(str: string) {

frontend/src/index.bisq.html

@@ -37,21 +37,5 @@
 </head>
 <body>
   <app-root></app-root>
-  <script type="text/javascript">
-    if (document.location.hostname === "bisq.markets")
-    {
-      var _paq = window._paq = window._paq || [];
-      _paq.push(['disableCookies']);
-      _paq.push(['trackPageView']);
-      _paq.push(['enableLinkTracking']);
-      (function() {
-        var u="//stats.bisq.markets/";
-        _paq.push(['setTrackerUrl', u+'m.php']);
-        _paq.push(['setSiteId', '7']);
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.type='text/javascript'; g.async=true; g.src=u+'m.js'; s.parentNode.insertBefore(g,s);
-      })();
-    }
-  </script>
 </body>
 </html>

frontend/src/index.liquid.html

@@ -35,21 +35,5 @@
 </head>
 <body>
   <app-root></app-root>
-  <script type="text/javascript">
-    if (document.location.hostname === "liquid.network")
-    {
-      var _paq = window._paq = window._paq || [];
-      _paq.push(['disableCookies']);
-      _paq.push(['trackPageView']);
-      _paq.push(['enableLinkTracking']);
-      (function() {
-        var u="//stats.liquid.network/";
-        _paq.push(['setTrackerUrl', u+'m.php']);
-        _paq.push(['setSiteId', '8']);
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.type='text/javascript'; g.async=true; g.src=u+'m.js'; s.parentNode.insertBefore(g,s);
-      })();
-    }
-  </script>
 </body>
 </html>

frontend/src/index.mempool.html

@@ -34,21 +34,5 @@
 </head>
 <body>
   <app-root></app-root>
-  <script type="text/javascript">
-    if (document.location.hostname === "mempool.space")
-    {
-      var _paq = window._paq = window._paq || [];
-      _paq.push(['disableCookies']);
-      _paq.push(['trackPageView']);
-      _paq.push(['enableLinkTracking']);
-      (function() {
-        var u="//stats.mempool.space/";
-        _paq.push(['setTrackerUrl', u+'m.php']);
-        _paq.push(['setSiteId', '5']);
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.type='text/javascript'; g.async=true; g.src=u+'m.js'; s.parentNode.insertBefore(g,s);
-      })();
-    }
-  </script>
 </body>
 </html>