Custom branding

frontend/custom-sv-config.json

@@ -1,6 +1,12 @@
 {
   "theme": "contrast",
-  "enterprise": "elsalvador",
+  "enterprise": "onbtc",
+  "branding": {
+    "name": "onbtc",
+    "title": "Oficina Nacional del Bitcoin",
+    "img": "/resources/elsalvador.svg",
+    "rounded_corner": true
+  },
   "dashboard": {
     "widgets": [
       {

frontend/src/app/components/address-graph/address-graph.component.scss

@@ -66,7 +66,6 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 270px;
 }
 
 .disabled {

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

@@ -19,7 +19,7 @@
   <a class="navbar-brand d-none d-md-flex" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
     <ng-template [ngIf]="subdomain && enterpriseInfo">
       <div class="subdomain_container">
-        <img [src]="'/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+        <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
       </div>
       <div class="vertical-line"></div>
     </ng-template>

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

@@ -23,7 +23,7 @@ export class EnterpriseService {
     private stateService: StateService,
     private activatedRoute: ActivatedRoute,
   ) {
-    const subdomain = this.stateService.env.customize.enterprise || this.document.location.hostname.indexOf(this.exclusiveHostName) > -1
+    const subdomain = this.stateService.env.customize?.enterprise || 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;
@@ -47,16 +47,23 @@ export class EnterpriseService {
   }
 
   fetchSubdomainInfo(): void {
-    this.apiService.getEnterpriseInfo$(this.subdomain).subscribe((info) => {
+    if (this.stateService.env.customize?.branding) {
+      const info = this.stateService.env.customize?.branding;
       this.insertMatomo(info.site_id);
       this.seoService.setEnterpriseTitle(info.title);
       this.info$.next(info);
-    },
-    (error) => {
-      if (error.status === 404) {
-        window.location.href = 'https://mempool.space' + window.location.pathname;
-      }
-    });
+    } else {
+      this.apiService.getEnterpriseInfo$(this.subdomain).subscribe((info) => {
+        this.insertMatomo(info.site_id);
+        this.seoService.setEnterpriseTitle(info.title);
+        this.info$.next(info);
+      },
+      (error) => {
+        if (error.status === 404) {
+          window.location.href = 'https://mempool.space' + window.location.pathname;
+        }
+      });
+    }
   }
 
   insertMatomo(siteId?: number): void {

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

@@ -23,6 +23,13 @@ export interface ILoadingIndicators { [name: string]: number; }
 export interface Customization {
   theme: string;
   enterprise?: string;
+  branding: {
+    name: string;
+    site_id?: number;
+    title: string;
+    img: string;
+    rounded_corner: boolean;
+  },
   dashboard: {
     widgets: {
       component: string;